"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BarChart = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@chakra-ui/react");
const react_chartjs_2_1 = require("react-chartjs-2");
const chart_js_1 = require("chart.js");
// Register Chart.js components
chart_js_1.Chart.register(chart_js_1.CategoryScale, chart_js_1.LinearScale, chart_js_1.BarElement, chart_js_1.Title, chart_js_1.Tooltip, chart_js_1.Legend);
/**
 * BarChart component for visualizing data as a bar chart
 */
const BarChart = ({ title, labels, datasets, height = '300px', showLegend = true, animate = true, horizontal = false, stacked = false, options, ...rest }) => {
    const theme = (0, react_1.useTheme)();
    const bgColor = (0, react_1.useColorModeValue)('white', 'gray.800');
    const textColor = (0, react_1.useColorModeValue)('gray.800', 'white');
    const gridColor = (0, react_1.useColorModeValue)('gray.200', 'gray.700');
    // Generate default colors if not provided
    const defaultColors = [
        theme.colors.blue[500],
        theme.colors.green[500],
        theme.colors.purple[500],
        theme.colors.orange[500],
        theme.colors.red[500],
        theme.colors.teal[500],
        theme.colors.pink[500],
        theme.colors.cyan[500],
    ];
    // Apply default colors to datasets if not provided
    const processedDatasets = datasets.map((dataset, index) => ({
        ...dataset,
        backgroundColor: dataset.backgroundColor || defaultColors[index % defaultColors.length],
        borderColor: dataset.borderColor || (dataset.backgroundColor ? dataset.backgroundColor : defaultColors[index % defaultColors.length]),
        borderWidth: dataset.borderWidth !== undefined ? dataset.borderWidth : 1,
        borderRadius: dataset.borderRadius !== undefined ? dataset.borderRadius : 4,
    }));
    // Chart data
    const data = {
        labels,
        datasets: processedDatasets,
    };
    // Default chart options
    const defaultOptions = {
        indexAxis: horizontal ? 'y' : 'x',
        responsive: true,
        maintainAspectRatio: false,
        animation: {
            duration: animate ? 1000 : 0,
        },
        plugins: {
            legend: {
                display: showLegend,
                position: 'top',
                labels: {
                    color: textColor,
                    font: {
                        family: theme.fonts.body,
                    },
                },
            },
            title: {
                display: !!title,
                text: title || '',
                color: textColor,
                font: {
                    family: theme.fonts.heading,
                    size: 16,
                    weight: 'bold',
                },
            },
            tooltip: {
                backgroundColor: bgColor,
                titleColor: textColor,
                bodyColor: textColor,
                borderColor: gridColor,
                borderWidth: 1,
                padding: 10,
                titleFont: {
                    family: theme.fonts.heading,
                    weight: 'bold',
                },
                bodyFont: {
                    family: theme.fonts.body,
                },
                displayColors: true,
            },
        },
        scales: {
            x: {
                stacked,
                grid: {
                    color: gridColor,
                },
                ticks: {
                    color: textColor,
                    font: {
                        family: theme.fonts.body,
                    },
                },
            },
            y: {
                stacked,
                grid: {
                    color: gridColor,
                },
                ticks: {
                    color: textColor,
                    font: {
                        family: theme.fonts.body,
                    },
                },
                beginAtZero: true,
            },
        },
    };
    // Merge default options with custom options
    const chartOptions = {
        ...defaultOptions,
        ...options,
        plugins: {
            ...defaultOptions.plugins,
            ...options?.plugins,
        },
        scales: {
            ...defaultOptions.scales,
            ...options?.scales,
        },
    };
    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: bgColor, borderRadius: "md", boxShadow: "sm", p: 4, height: height, ...rest, children: (0, jsx_runtime_1.jsx)(react_chartjs_2_1.Bar, { data: data, options: chartOptions }) }));
};
exports.BarChart = BarChart;
exports.default = exports.BarChart;
//# sourceMappingURL=BarChart.js.map