"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const recharts_1 = require("recharts");
function PHXBarChart(props) {
    const { data, dataKeyLineChart, colorLineChart, dataKeyChartA, dataKeyChartB, xAxisKey, yAxisRightKey, domain, nameLineChart, nameLegendChartSingle, hiddenLineChart, doubleColumnInRow, barSize, nameColumnDouble, chartType, radiusChart, chartColumnA, chartColumnB, } = props;
    const [hoveredBar, setHoveredBar] = (0, react_1.useState)(null);
    const onMouseEnter = (value) => {
        setHoveredBar(value.tooltipPayload[0].name);
    };
    const onMouseLeave = () => {
        setHoveredBar(null);
    };
    const CustomToolLegend = (propsTooltip) => {
        const { payload } = propsTooltip;
        // gộp những item có label name giống nhau thành 1
        const aggregatedItems = {};
        payload.forEach((item) => {
            var _a;
            const name = (_a = item === null || item === void 0 ? void 0 : item.payload) === null || _a === void 0 ? void 0 : _a.name;
            if (!aggregatedItems[name]) {
                aggregatedItems[name] = {
                    ...item,
                    count: 1,
                };
            }
            else {
                aggregatedItems[name].count++;
            }
        });
        const aggregatedItemsArray = Object.values(aggregatedItems);
        return (react_1.default.createElement("div", { className: `custom-legend ${chartType === 'single-column' ? 'mt-2 mr-11 ml-8 mb-2' : 'mt-4'}` },
            react_1.default.createElement("div", { className: 'flex flex-wrap md:justify-end sm:justify-start gap-2' }, aggregatedItemsArray === null || aggregatedItemsArray === void 0 ? void 0 : aggregatedItemsArray.map((item) => (react_1.default.createElement("div", { key: item.id, className: 'p-1 rounded-md' },
                react_1.default.createElement("div", { style: {
                        display: 'flex',
                        alignItems: 'center',
                        opacity: !hoveredBar ? 1 : hoveredBar === item.payload.name ? 1 : 0.5,
                    } },
                    react_1.default.createElement("div", { className: 'rounded w-[14px] h-[14px] flex items-center', style: {
                            background: `linear-gradient(${item.color}, ${item.color})`,
                        } }),
                    react_1.default.createElement("p", { className: 'ml-1 mr-1 text-xs text-[#999]' }, item === null || item === void 0 ? void 0 : item.payload.name))))))));
    };
    const CustomToolTip = (propsTooltip) => {
        var _a, _b, _c, _d;
        const { active, payload } = propsTooltip;
        if (!active || !payload || payload.length === 0) {
            return null;
        }
        const groupedItems = {};
        payload.forEach((item) => {
            const name = item.name;
            if (!groupedItems[name]) {
                groupedItems[name] = item;
            }
        });
        const groupedItemsArray = Object.values(groupedItems);
        return (react_1.default.createElement("div", { className: 'bg-gray-100 m-2.5 w-40 p-0.5 rounded-lg' }, chartType === 'single-column' ? (react_1.default.createElement("div", { className: 'flex justify-between' },
            react_1.default.createElement("p", { className: 'ml-2 py-1' }, (_b = (_a = groupedItemsArray[0]) === null || _a === void 0 ? void 0 : _a.payload) === null || _b === void 0 ? void 0 : _b.name),
            groupedItemsArray.map((item) => (react_1.default.createElement("p", { key: item.id, className: 'py-1 mr-2' }, item.payload.amt))))) : (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement("div", { className: 'ml-2 mt-2' }, (_d = (_c = groupedItemsArray[0]) === null || _c === void 0 ? void 0 : _c.payload) === null || _d === void 0 ? void 0 : _d.name),
            groupedItemsArray.map((item) => (react_1.default.createElement("div", { key: item.id, className: 'flex p-1.5 mt-1' },
                react_1.default.createElement("div", { className: `
                      rounded w-4 h-4 bg-gradient-to-r flex items-center justify-center 
                      ${item.color} 
                      ${item.color} 
                      ${hoveredBar === item.name ? 'opacity-100' : 'opacity-50'}
                    `, style: {
                        background: `linear-gradient(${item.color}, ${item.color})`,
                    } }),
                react_1.default.createElement("div", { className: `ml-2 ${hoveredBar === item.name ? 'opacity-100' : 'opacity-50'}` }, item.name),
                react_1.default.createElement("div", { className: `ml-auto ${hoveredBar === item.name ? 'opacity-100' : 'opacity-50'}` }, item.payload.amt))))))));
    };
    const columns = chartColumnA === null || chartColumnA === void 0 ? void 0 : chartColumnA.map((item) => ({ ...item }));
    const columnsPageB = chartColumnB === null || chartColumnB === void 0 ? void 0 : chartColumnB.map((item) => ({ ...item }));
    const handleBoderChart = (index, chartColumn) => {
        const chartIndex = index === chartColumn.length - 1 ? radiusChart !== null && radiusChart !== void 0 ? radiusChart : [6, 6, 0, 0] : [0, 0, 0, 0];
        return chartIndex;
    };
    return (react_1.default.createElement("div", { className: `${chartType === 'single-column' ? 'min-w-[1200px]' : ''}` },
        react_1.default.createElement(recharts_1.ResponsiveContainer, { height: 500, width: '100%' },
            react_1.default.createElement(recharts_1.ComposedChart, { barGap: 20, data: data, height: 300, width: 500 },
                react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: '3 3', vertical: false }),
                react_1.default.createElement(recharts_1.XAxis, { axisLine: false, dataKey: xAxisKey !== null && xAxisKey !== void 0 ? xAxisKey : 'name' }),
                react_1.default.createElement(recharts_1.YAxis, { axisLine: false }),
                react_1.default.createElement(recharts_1.YAxis, { axisLine: false, dataKey: yAxisRightKey !== null && yAxisRightKey !== void 0 ? yAxisRightKey : 'yAxisRight', domain: domain, minTickGap: 20, orientation: 'right', tickCount: 5, yAxisId: 2 }),
                react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomToolTip, null) }),
                react_1.default.createElement(recharts_1.Legend, { content: react_1.default.createElement(CustomToolLegend, null) }),
                chartType === 'one-to-many' && (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(recharts_1.Bar, { barSize: barSize, dataKey: dataKeyChartA !== null && dataKeyChartA !== void 0 ? dataKeyChartA : 'pv', onMouseEnter: (value) => onMouseEnter(value), fill: '#dd75c1', name: 'name' },
                        react_1.default.createElement(recharts_1.Cell, { fill: '#dd75c1' })), columnsPageB === null || columnsPageB === void 0 ? void 0 :
                    columnsPageB.map((item, index) => (react_1.default.createElement(recharts_1.Bar, { key: `bar-pageB-${index}`, onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'amt', fill: item.color, name: item.name, position: { x: 30 }, 
                        // @ts-ignore
                        radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
                        react_1.default.createElement(recharts_1.Cell, { key: `cell-pageB-${index}`, fill: item.color })))))),
                chartType === 'many-to-one' && (react_1.default.createElement(react_1.default.Fragment, null, columnsPageB === null || columnsPageB === void 0 ? void 0 :
                    columnsPageB.map((item, index) => (react_1.default.createElement(recharts_1.Bar, { key: `bar-pageB-${index}`, onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: 'pv', fill: item.color, name: item.name, position: { x: 30 }, 
                        // @ts-ignore
                        radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
                        react_1.default.createElement(recharts_1.Cell, { key: `cell-pageB-${index}`, fill: item.color })))),
                    react_1.default.createElement(recharts_1.Bar, { onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'uv', fill: '#dd75c1', name: 'name' },
                        react_1.default.createElement(recharts_1.Cell, { fill: '#dd75c1' })))),
                chartType === 'single' && (
                // @ts-ignore
                react_1.default.createElement(recharts_1.Bar, { onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'pv', fill: '#dd75c1', name: 'name' },
                    react_1.default.createElement(recharts_1.Cell, { fill: '#dd75c1' }))),
                chartType === 'single-column' && (react_1.default.createElement(recharts_1.Bar, { onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'pv', fill: '#7857FF', name: nameLegendChartSingle, radius: [6, 6, 0, 0] },
                    react_1.default.createElement(recharts_1.Cell, { fill: '#7857FF' }))),
                chartType === 'double' && (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(recharts_1.Bar, { onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'pv', fill: '#dd75c1', name: 'name' },
                        react_1.default.createElement(recharts_1.Cell, { fill: '#dd75c1' })),
                    doubleColumnInRow && (
                    // @ts-ignore
                    react_1.default.createElement(recharts_1.Bar, { onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'uv', fill: '#8868ee', name: nameColumnDouble },
                        react_1.default.createElement(recharts_1.Cell, { fill: '#8868ee' }))))),
                chartType === 'many-to-many' && (react_1.default.createElement(react_1.default.Fragment, null, columns === null || columns === void 0 ? void 0 :
                    columns.map((item, index) => (react_1.default.createElement(recharts_1.Bar, { key: `bar-pageA-${index}`, onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'uv', fill: item.color, name: item.name, position: { x: 30 }, 
                        // @ts-ignore
                        radius: handleBoderChart(index, columns), stackId: 'stackA' },
                        react_1.default.createElement(recharts_1.Cell, { key: `cell-pageA-${index}`, fill: item.color })))), columnsPageB === null || columnsPageB === void 0 ? void 0 :
                    columnsPageB.map((item, index) => (react_1.default.createElement(recharts_1.Bar, { key: `bar-pageB-${index}`, onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'pv', fill: item.color, name: item.name, position: { x: 30 }, 
                        // @ts-ignore
                        radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
                        react_1.default.createElement(recharts_1.Cell, { key: `cell-pageB-${index}`, fill: item.color })))))),
                !hiddenLineChart && (react_1.default.createElement(recharts_1.Line, { type: 'monotone', name: nameLineChart, dataKey: dataKeyLineChart !== null && dataKeyLineChart !== void 0 ? dataKeyLineChart : 'lineChart', stroke: colorLineChart !== null && colorLineChart !== void 0 ? colorLineChart : '#ff7300' }))))));
}
exports.default = PHXBarChart;
//# sourceMappingURL=BarChart.js.map