import ReactECharts from 'echarts-for-react';

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

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

const VizRadarChartItem = ({ items }: { items: VizRadarChartType[] }) => {

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

    const maxValue = Math.max(...items.map((item) => item.value ?? 0));
    const colors = getVizChartColors();
    const primaryColor = colors[0] ?? '#888';
    const baseOption = getVizChartBaseOption();
    const borderColor = getCssVar('--border');

    return (
        <div>
            <ReactECharts
                style={{ height: 230 }}
                option={{
                    ...baseOption,
                    tooltip: {
                        ...baseOption.tooltip,
                        trigger: 'item',
                    },
                    radar: {
                        indicator: items.map((item) => ({
                            name: item.label,
                            max: maxValue,
                        })) ?? [],
                        axisName: {
                            color: baseOption.textStyle?.color,
                            fontSize: 11,
                        },
                        splitLine: {
                            lineStyle: {
                                color: borderColor,
                                opacity: 0.4,
                            },
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: ['transparent', 'rgba(128,128,128,0.04)'],
                            },
                        },
                    },
                    series: [
                        {
                            data: [{
                                value: items.map((item) => item.value) ?? [],
                                name: '',
                            }],
                            type: 'radar',
                            symbol: 'circle',
                            symbolSize: 5,
                            lineStyle: { width: 2, color: primaryColor },
                            itemStyle: { color: primaryColor },
                            areaStyle: { color: primaryColor, opacity: 0.15 },
                        },
                    ],
                }}
            />
        </div>
    )
}

export default VizRadarChartItem;
