import { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'

import { arrayOrDefault } from '@utils'
import { OperationStatService } from '@api'
import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'

import ClusterWells from './ClusterWells'

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

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

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

export default Cluster