<template>
    <div>
        <VChart
            :option="chartOptions"
            class="vertical-bar-chart"
            autoresize
            :init-options="{
                renderer: 'canvas',
                width: 'auto',
                height: '400px',
            }"
        ></VChart>
    </div>
</template>

<script lang="ts">
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { ChartType, tooltipOptions } from "./tooltipConfig";
import { TooltipComponent, GridComponent, TitleComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { chartLabelsStyle, formatNumbers } from "./utils"

// Register the necessary ECharts components
use([BarChart, CanvasRenderer, TooltipComponent, GridComponent, TitleComponent])

export default {
    components: {
        VChart,
    },
    props: {
        data: {
            type: Array,
            required: true,
        },
        title: {
            type: String,
            default: "",
        },
    },
    computed: {
        chartOptions() {
            return {
                title: {
                    text: this.title,
                    bottom: 20,
                    left: "center",
                    textStyle: {
                        ...chartLabelsStyle,
                    },
                },
                tooltip: tooltipOptions(ChartType.VerticalBar, this.title),
                grid: {
                    containLabel: true,
                },
                yAxis: {
                    type: "value",
                    name: this.title,
                    axisLabel: {
                        ...chartLabelsStyle,
                        formatter: (value: any) => formatNumbers(value)
                    },
                    nameTextStyle: {
                        ...chartLabelsStyle,
                    },
                },
                xAxis: {
                    type: "category",
                    data: this.data.filter((item: any) => item.type === "initial").map((item: any) => item.label),
                    axisLabel: {
                        ...chartLabelsStyle,
                    },
                },
                series: [
                    {
                        name: "Initial optimization",
                        type: "bar",
                        data: this.data
                            .filter((item: any) => item.type === "initial")
                            .map((item: any) => ({
                                value: item.value,
                                name: item.label,
                                itemStyle: {
                                    color: "#F8A217",
                                },
                            })),
                    },
                    {
                        name: "Customization",
                        type: "bar",
                        data: this.data
                            .filter((item: any) => item.type !== "initial")
                            .map((item: any) => ({
                                value: item.value,
                                name: item.label,
                                itemStyle: {
                                    color: "#3A69DA",
                                },
                            })),
                    },
                ],
            };
        },
    },
};
</script>

<style scoped>
.vertical-bar-chart {
    width: 100%;
    height: 400px; /* Adjust the height as needed */
}
</style>
