import React, { useState, useEffect, useContext } from 'react'
import { AppContext } from 'components/Contexts/AppContextProvider'
import { withClient, Client } from 'cozy-client'
import { DateTime } from 'luxon'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'services/dataConsumptionContracts'
import { TypeChallenge, UserChallenge } from 'services/dataChallengeContracts'
import ConsumptionDataManager from 'services/consumptionDataManagerService'
import FluidChartContent from 'components/ContentComponents/FluidChart/FluidChartContent'
import ActivateHalfHourLoad from 'components/ContentComponents/ConsumptionNavigator/ActivateHalfHourLoad'

interface FluidChartContainerProps {
  timeStep: TimeStep
  fluidTypes: FluidType[]
  resetReferenceDate: boolean
  multiFluid: boolean
  handleClickTimeStep(_timeStep: TimeStep): void
  setChartLoaded(): void
  client: Client
}

const FluidChartContainer: React.FC<FluidChartContainerProps> = ({
  timeStep,
  fluidTypes,
  resetReferenceDate,
  multiFluid,
  handleClickTimeStep,
  setChartLoaded,
  client,
}: FluidChartContainerProps) => {
  const { currentChallenge } = useContext(AppContext)
  const [lastDataDate, setLastDataDate] = useState<DateTime>(DateTime.local())
  const [lastDateWithAllData, setLastDateWithAllData] = useState<DateTime>(
    DateTime.local()
  )
  const [isMinuteBlocked, setMinuteBlocked] = useState<boolean>(false)
  const [referenceDate, setReferenceDate] = useState<DateTime>(DateTime.local())
  const [isLoaded, setIsLoaded] = useState<boolean>(false)
  const [challenge, setChallenge] = useState<UserChallenge | null>(null)

  const consumptionDataManager = new ConsumptionDataManager(client)

  const handleDetailedDate = (date: DateTime, timeStep: TimeStep) => {
    setReferenceDate(date)
    handleClickTimeStep(timeStep)
  }

  useEffect(() => {
    let subscribed = true
    async function loadData() {
      const activateHalfHourLoad = !(await consumptionDataManager.checkDoctypeEntries(
        FluidType.ELECTRICITY,
        TimeStep.HALF_AN_HOUR
      ))

      const data = await consumptionDataManager.fetchLastDateData(fluidTypes)
      const dataWithAllFluids = await consumptionDataManager.fetchLastDateData(
        fluidTypes,
        true
      )
      if (subscribed && data) {
        setLastDataDate(data)
        setReferenceDate(data)
      }
      if (subscribed && dataWithAllFluids) {
        setLastDateWithAllData(dataWithAllFluids)
      }
      if (subscribed && activateHalfHourLoad) {
        setMinuteBlocked(true)
      }
      if (subscribed && currentChallenge) {
        if (
          currentChallenge.challengeType &&
          currentChallenge.challengeType.type === TypeChallenge.CHALLENGE
        ) {
          setChallenge(currentChallenge)
        }
      }
      setChartLoaded()
      setIsLoaded(true)
    }
    loadData()
    return () => {
      subscribed = false
    }
  }, [])

  useEffect(() => {
    let subscribed = true
    async function reset() {
      if (subscribed && resetReferenceDate) {
        setReferenceDate(lastDataDate)
        setChartLoaded()
        setIsLoaded(true)
      }
    }
    reset()
    return () => {
      subscribed = false
    }
  }, [resetReferenceDate])

  useEffect(() => {
    if (
      currentChallenge &&
      currentChallenge.challengeType &&
      currentChallenge.challengeType.type === TypeChallenge.CHALLENGE
    ) {
      setChallenge(currentChallenge)
    }
  }, [currentChallenge])

  return (
    <>
      {isLoaded ? (
        <>
          {isMinuteBlocked && timeStep === TimeStep.HALF_AN_HOUR && (
            <ActivateHalfHourLoad />
          )}
          <div className="fc-root">
            <div className="fc-content">
              <FluidChartContent
                referenceDate={referenceDate}
                lastDataDate={lastDataDate}
                lastDateWithAllData={lastDateWithAllData}
                fluidTypes={fluidTypes}
                timeStep={timeStep}
                multiFluid={multiFluid}
                currentChallenge={challenge}
                consumptionDataManager={consumptionDataManager}
                isDataLoaded={isLoaded}
                handleDetailedDate={handleDetailedDate}
              ></FluidChartContent>
            </div>
          </div>
        </>
      ) : null}
    </>
  )
}

export default withClient(FluidChartContainer)