import ReactECharts from 'echarts-for-react';

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

import VizChartEmpty from './VizChartEmpty';

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

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

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

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



                    tooltip: {
                        trigger: 'item'
                    },

                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '5%',
                        containLabel: true
                    },


                    series: [
                        {
                            data: items.map((item) => {
                                return {
                                    value: item.value,
                                    name: item.label
                                }
                            }) ?? [],
                            type: 'pie',
                            //  radius: '50%',
                            smooth: true,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        },
                    ],
                }}


            />

        </div>
    )
}

export default VizPieChartItem;