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 { OperationStatService } from '../../services/api'


export const Cluster = () => {
  const { idClaster } = useParams()
  const [data, setData] = useState([])
  const [showLoader, setShowLoader] = useState(false)

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

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

export default Cluster