<template>
    <div>
        <div class="bs-font-large-1-semi-bold title" v-if="data">
            {{ title }}
        </div>
        <VChart
            :option="chartOptions"
            class="horizontal-bar-chart"
            autoresize
            :init-options="{
                renderer: 'canvas',
                width: 'auto',
                height: '400px',
            }"
        ></VChart>
        <div style="display: inline-flex; gap: 20px; margin-left: 25%">
            <div>
                <img src="../assets/images/bar-legend-negative-uplift.svg" />
                <span class="bs-font-small-1-normal" style="margin-left: 5px"
                    >Negative Uplift</span
                >
            </div>
            <div>
                <img src="../assets/images/bar-legend-positive-uplift.svg" />
                <span class="bs-font-small-1-normal" style="margin-left: 5px"
                    >Positive Uplift</span
                >
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { ChartType, tooltipOptions } from "./tooltipConfig";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { chartLabelsStyle } from "./utils";
use(CanvasRenderer);
export default {
    components: {
        VChart,
    },
    props: {
        data: {
            type: Array,
            required: true,
        },
        title: {
            type: String,
            default: "",
        },
        chartTitle: {
            type: String,
            default: "",
        },
        xRange: {
            type: Array<Number>,
            default: undefined,
        },
    },
    computed: {
        chartOptions() {
            return {
                title: {
                    text: this.chartTitle,
                    bottom: 20,
                    left: "center",
                    textStyle: chartLabelsStyle,
                },
                tooltip: tooltipOptions(
                    ChartType.HorizontalBar,
                    this.chartTitle
                ),
                grid: {
                    containLabel: true,
                },
                xAxis: {
                    type: "value",
                    axisLabel: { ...chartLabelsStyle, formatter: "{value} %" },
                    min: this.xRange ? this.xRange[0] : null,
                    max: this.xRange ? this.xRange[1] : null,
                },
                yAxis: {
                    type: "category",
                    data: this.data.map((item: any) => item.label),
                    axisLabel: chartLabelsStyle,
                },
                series: [
                    {
                        type: "bar",
                        data: this.data.map((item: any) => ({
                            value: item.value,
                            itemStyle: {
                                color: item.value >= 0 ? "#1E9B50" : "#CE1228",
                            },
                            tooltip: item.tooltip,
                        })),
                    },
                ],
            };
        },
    },
};
</script>

<style scoped>
.horizontal-bar-chart {
    width: 100%;
    height: 400px;
}
</style>
