import ReactECharts from 'echarts-for-react';

import { VizLineChartType } from '@/api/types';

import {
    getVizChartBaseOption,
    getVizChartColors,
    getVizLineAreaStyle,
} from '../vizChartTheme';
import VizChartEmpty from './VizChartEmpty';

const VizLineChartItem = ({ items }: { items: VizLineChartType[] }) => {

    if (items.length == 0) {
        return <VizChartEmpty />
    }

    const colors = getVizChartColors();
    const primaryColor = colors[0] ?? '#888';
    const baseOption = getVizChartBaseOption();

    return (
        <div>
            <ReactECharts
                style={{ height: 280 }}
                option={{
                    ...baseOption,
                    tooltip: {
                        ...baseOption.tooltip,
                        trigger: 'axis',
                        axisPointer: { type: 'line' },
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: 60,
                        top: '5%',
                        containLabel: true,
                    },
                    dataZoom: [
                        {
                            type: 'slider',
                            xAxisIndex: 0,
                            start: 0,
                            end: 100,
                            height: 20,
                            bottom: 8,
                            borderColor: 'transparent',
                            backgroundColor: 'transparent',
                            fillerColor: 'rgba(128,128,128,0.12)',
                            handleStyle: { color: primaryColor },
                        },
                        {
                            type: 'inside',
                            xAxisIndex: 0,
                            start: 0,
                            end: 100,
                        },
                    ],
                    xAxis: {
                        type: 'category',
                        data: items.map((item) => item.label),
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            data: items.map((item) => item.value) ?? [],
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 6,
                            showSymbol: true,
                            lineStyle: { width: 2, color: primaryColor },
                            itemStyle: { color: primaryColor },
                            areaStyle: getVizLineAreaStyle(primaryColor),
                            emphasis: {
                                focus: 'none',
                                scale: false,
                                lineStyle: { width: 2, color: primaryColor, opacity: 1 },
                                itemStyle: { color: primaryColor, opacity: 1 },
                                areaStyle: getVizLineAreaStyle(primaryColor),
                            },
                            blur: {
                                lineStyle: { width: 2, color: primaryColor, opacity: 1 },
                                itemStyle: { opacity: 1 },
                                areaStyle: getVizLineAreaStyle(primaryColor),
                            },
                        },
                    ],
                }}
            />
        </div>
    )
}

export default VizLineChartItem;
