import { defineComponent, h, PropType } from 'vue';

import { Bar } from 'vue-chartjs';

import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    BarElement,
    CategoryScale,
    LinearScale,
    Plugin,
} from 'chart.js';

ChartJS.register(
    Title,
    Tooltip,
    Legend,
    BarElement,
    CategoryScale,
    LinearScale
);

export default defineComponent({
    name: 'BarChart',
    components: {
        Bar,
    },
    props: {
        chartId: {
            type: String,
            default: 'bar-chart',
        },
        chartData: {
            type: Object,
        },
        chartOptions: {
            type: Object,
        },
        width: {
            type: Number,
            default: 400,
        },
        height: {
            type: Number,
            default: 400,
        },
        cssClasses: {
            default: '',
            type: String,
        },
        styles: {
            type: Object as PropType<Partial<CSSStyleDeclaration>>,
            default: () => {},
        },
        plugins: {
            type: Array as PropType<Plugin<'bar'>[]>,
            default: () => [],
        },
    },
    setup(props) {
        return () =>
            h(Bar, {
                chartData: props.chartData,
                chartOptions: props.chartOptions,
                chartId: props.chartId,
                width: props.width,
                height: props.height,
                cssClasses: props.cssClasses,
                styles: props.styles,
                plugins: props.plugins,
            });
    },
});