import ReactECharts from 'echarts-for-react';

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

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));

    return (
        <div>
            <ReactECharts
                style={{
                    height: 230,
                }}

                option={{
                    darkMode: false ? true : false,




                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },

                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '5%',
                        containLabel: true
                    },
                    radar: {
                        indicator: items.map((item) => {
                            return {
                                name: item.label,
                                max: maxValue,
                            }
                        }) ?? [],
                    },


                    series: [
                        {
                            data: items.map((item) => item.value) ?? [],
                            type: 'radar',
                            smooth: true,
                        },
                    ],
                }}


            />

        </div>
    )
}

export default VizRadarChartItem;