import ReactECharts from 'echarts-for-react';

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

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

const VizBarChartItem = ({ items }: { items: VizBarChartType[] }) => {

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

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

    return (
        <div>
            <ReactECharts
                style={{ height: 230 }}
                option={{
                    ...baseOption,
                    tooltip: {
                        ...baseOption.tooltip,
                        trigger: 'axis',
                        axisPointer: { type: 'shadow' },
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '5%',
                        containLabel: true,
                    },
                    xAxis: {
                        type: 'category',
                        data: items.map((item) => item.label),
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            data: items.map((item) => item.value) ?? [],
                            type: 'bar',
                            itemStyle: getVizBarItemStyle(primaryColor),
                        },
                    ],
                }}
            />
        </div>
    )
}

export default VizBarChartItem;
