import ReactECharts from 'echarts-for-react';

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

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

const VizPieChartItem = ({ items }: { items: VizPieChartType[] }) => {

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

    const colors = getVizChartColors();
    const baseOption = getVizChartBaseOption();

    return (
        <div>
            <ReactECharts
                style={{ height: 230 }}
                option={{
                    ...baseOption,
                    tooltip: {
                        ...baseOption.tooltip,
                        trigger: 'item',
                    },
                    legend: {
                        orient: 'vertical',
                        right: '5%',
                        top: 'center',
                        textStyle: {
                            color: baseOption.textStyle?.color,
                            fontSize: 11,
                        },
                    },
                    color: colors,
                    series: [
                        {
                            data: items.map((item) => ({
                                value: item.value,
                                name: item.label,
                            })) ?? [],
                            type: 'pie',
                            radius: ['42%', '68%'],
                            center: ['40%', '50%'],
                            padAngle: 2,
                            itemStyle: {
                                borderRadius: 4,
                                borderColor: 'transparent',
                                borderWidth: 2,
                            },
                            label: { show: false },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.15)',
                                },
                            },
                        },
                    ],
                }}
            />
        </div>
    )
}

export default VizPieChartItem;
