import { useParams } from "react-router-dom"
import notify from "../components/notify"
import { useState, useEffect } from 'react'
import { AnalyticsService } from "../services/api"
import { ChartDepthToInterval } from './charts/ChartDepthToInterval'

const line = {label: 'Данные по глубине скважины за период', y: 'intervalDepthProgress', x: 'intervalStartDate'}

export function AnalysisDepthToInterval() {
  let { id } = useParams()
  const [depthToIntervalData, setDepthToIntervalData] = useState([])
  const [loader, setLoader] = useState(false)

  const handleReceiveDepthToIntervalData = (data) => {
    setDepthToIntervalData(data)
  }

  useEffect(() => {
    setLoader(true)
    AnalyticsService.getWellDepthToInterval(id)
      .then(handleReceiveDepthToIntervalData)
      .catch(error => {
        notify(`Не удалось получить данные для Анализа Глубина-День по скважине "${id}"`,
          'warning')
        console.log(error)
      })
      .finally(setLoader(false))
  }, [id])

  return (
    <>
      <ChartDepthToInterval
        data={depthToIntervalData}
        line={line}
      />
    </>
  )
}