import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import ClusterWells from "./ClusterWells";
import LoaderPortal from "../../components/LoaderPortal";
import { invokeWebApiWrapperAsync } from "../../components/factory";
import { WellOperationStatService } from "../../services/api";


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

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

  useEffect(() => console.log(data), [data])

  return (
    <LoaderPortal show={showLoader}>
      <ClusterWells statsWells={data} />
    </LoaderPortal>
  )
}