import { Layout, Menu } from "antd";
import { Link, Switch, Route, Redirect, useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import ClusterWells from "./ClusterWells";
import ClusterSections from "./ClusterSections";
import LoaderPortal from "../../components/LoaderPortal";
import { invokeWebApiWrapperAsync } from "../../components/factory";
import { WellOperationStatService } from "../../services/api";

const { Content } = Layout;


export default function Cluster() {
  let { idClaster, tab } = useParams();
  const [data, setData] = useState([]);
  const [showLoader, setShowLoader] = useState(false);

  useEffect(() => {
    invokeWebApiWrapperAsync(
      async () => {
        const clusterData = await WellOperationStatService.getStatCluster(
          idClaster
        );
        setData(clusterData ?? []);
      },
      setShowLoader,
      `Не удалось загрузить данные по кусту "${idClaster}"`
    );
  }, [idClaster]);

  return (
    <>
      <Layout>
        <Menu
          mode="horizontal"
          selectable={true}
          selectedKeys={[tab]}
          className="well_menu"
        >
          <Menu.Item key="wells">
            <Link to={`/cluster/${idClaster}/wells`}>Скважины</Link>
          </Menu.Item>
          <Menu.Item key="sections">
            <Link to={`/cluster/${idClaster}/sections`}>Секции</Link>
          </Menu.Item>
        </Menu>
      </Layout>

      <Layout>
        <LoaderPortal show={showLoader}>
          <Content className="site-layout-background">
            <Switch>
              <Route path="/cluster/:id/wells">
                <ClusterWells clusterData={data} />
              </Route>
              <Route path="/cluster/:id/sections">
                <ClusterSections clusterData={data} />
              </Route>
              <Route path="/">
                <Redirect to={`/cluster/${idClaster}/wells`} />
              </Route>
            </Switch>
          </Content>
        </LoaderPortal>
      </Layout>
    </>
  );
}