import React, {FC, useEffect, useRef, useState} from "react"
import {rainfallGraphData} from "../../types"
import {init, getInstanceByDom} from 'echarts'
import type {ECharts } from "echarts"

const RainFallEcharts: FC<RainFallEchartsProps> = ({width, height, data, loading}) => {

    // https://dev.to/manufac/using-apache-echarts-with-react-and-typescript-353k
    const chartRef = useRef<HTMLDivElement>(null)
    const [option, setOption] = useState({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        label: {
            show: true,
        },
        xAxis: [
            {
                type: 'category',
                data: data.map(d => d.label),
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Pluviométrie',
                type: 'bar',
                color: ['steelblue'],
                barWidth: '80%',
                data: data.map(d => d.value)
            }
        ]
    })

    useEffect(() => {
        let chart: ECharts | undefined
        console.log('in', width, height)
        if (chartRef.current !== null) {
            chart = init(chartRef.current)
        }

        function resizeChart() {
            chart?.resize()
        }
        window.addEventListener("resize", resizeChart)

        return () => {
            chart?.dispose()
            window.removeEventListener("resize", resizeChart)
        }
    }, [])

    useEffect(() => {
        console.log('data')
        if (chartRef.current !== null) {
            console.log('data', data)
            const chart = getInstanceByDom(chartRef.current)
            chart?.setOption(option)
        }
    }, [option, data])

    useEffect(() => {
        setOption({...option,
            xAxis: [
                {
                    type: 'category',
                    data: data.map(d => d.label),
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            series: [
                {
                    name: 'Pluviométrie',
                    type: 'bar',
                    color: ['steelblue'],
                    barWidth: '80%',
                    data: data.map(d => d.value)
                }
            ]
        })
    }, [data])

    useEffect(() => {
        if (chartRef.current !== null) {
            const chart = getInstanceByDom(chartRef.current)
            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
            loading === true ? chart?.showLoading() : chart?.hideLoading()
        }
    }, [loading])

    return <div className="relative">
        <div ref={chartRef} style={{width: "100%", height}} />
        <div id="tooltip" className="absolute left-10 top-3 rounded border p-2" style={{opacity: 0}}></div>
    </div>
}

export default RainFallEcharts

interface RainFallEchartsProps {
    width: number,
    height: number,
    data: rainfallGraphData[],
    loading: boolean,
}