import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import './StackedBarChart.scss';
import Typography from '../../Typography';
import AutoTruncateText from '../../AutoTruncateText';
const StackedBarChart = ({ data, barWidth = 24, height = 250, barGap = 40, barBorderRadius = 0, xAxisLabel, yAxisLabel, yAxisDivisions = 5, padding = 20, legend = true, legendPosition = 'bottom', showXAxisLabels = true, isTruncateText = true, isOnclick = false, onSelectedBar, onSegmentClick, }) => {
    const [selectedBar, setSelectedBar] = useState(null);
    const topPadding = 40;
    const leftPadding = 50;
    const maxTotal = Math.max(...data?.map((item) => item?.segments?.reduce((number, segment) => number + segment?.value, 0)), yAxisDivisions);
    const allKeys = Array.from(new Set(data.flatMap((block) => block?.segments?.map((segment) => segment?.key))));
    const keyColorMap = {};
    data.forEach((item) => item?.segments.forEach((segment) => {
        if (!keyColorMap[segment.key])
            keyColorMap[segment.key] = segment.color;
    }));
    const totalBarWidth = data.length * barWidth + (data.length - 1) * barGap;
    const chartWidth = totalBarWidth + leftPadding + padding + 20;
    const xAxisLabelWidth = barWidth + barGap;
    const handleClick = (colData, index) => {
        if (!isOnclick)
            return;
        setSelectedBar(colData);
        onSelectedBar?.(colData, index);
    };
    const handleSegmentClick = (label, segment, segmentIndex) => {
        onSegmentClick?.(label, segment, segmentIndex);
    };
    const renderLegend = () => (_jsx("div", { className: "ff-stacked-bar-legend", children: allKeys.map((key) => (_jsxs("div", { className: "ff-stacked-bar-legend-item", children: [_jsx("span", { className: "ff-stacked-bar-legend-dot", style: { backgroundColor: keyColorMap[key] } }), isTruncateText ? (_jsx(AutoTruncateText, { className: "ff-stacked-bar-legend-label", placement: legendPosition === 'top' ? 'bottom' : 'top', children: key })) : (_jsx(Typography, { as: "span", className: "ff-stacked-bar-legend-label", fontSize: 10, fontWeight: "regular", children: key }))] }, key))) }));
    return (_jsxs("div", { className: "ff-stacked-bar-container", children: [legend && legendPosition === 'top' && renderLegend(), _jsxs("svg", { width: chartWidth, height: height +
                    topPadding +
                    5 +
                    (showXAxisLabels ? 20 : 0) +
                    (xAxisLabel ? 20 : 0), children: [Array.from({ length: yAxisDivisions + 1 }).map((_, i) => {
                        const y = height - (i / yAxisDivisions) * height + topPadding + 4;
                        const val = ((i * maxTotal) / yAxisDivisions)
                            .toFixed(0)
                            .padStart(2, '0');
                        return (_jsx("text", { x: leftPadding - 5, y: y, textAnchor: "end", className: "ff-stacked-bar-label", children: val }, i));
                    }), _jsx("line", { x1: leftPadding, y1: topPadding, x2: leftPadding, y2: height + topPadding, stroke: "var(--ff-comment-border-color)", strokeWidth: "1" }), data?.map((item, barIndex) => {
                        const total = item?.segments?.reduce((idx, segment) => idx + segment.value, 0);
                        const barX = barIndex * (barWidth + barGap) + leftPadding + padding;
                        const isSelected = selectedBar?.label === item?.label;
                        let stackY = height + topPadding;
                        return (_jsxs("g", { onClick: () => handleClick(item, barIndex), style: { cursor: isOnclick ? 'pointer' : 'default' }, children: [item?.segments?.map((segment, segIndex) => {
                                    const segHeight = total > 0 ? (segment?.value / maxTotal) * height : 0;
                                    stackY -= segHeight;
                                    const isLastSeg = segIndex === item?.segments?.length - 1;
                                    const rx = isLastSeg ? barBorderRadius : 0;
                                    const segY = stackY;
                                    const tooltipId = `stacked-bar-tooltip-${barIndex}-${segIndex}`;
                                    return (_jsxs("g", { children: [_jsx("rect", { x: barX, y: segY, width: barWidth, height: segHeight, fill: segment.color, rx: isLastSeg ? rx : 0, ry: isLastSeg ? rx : 0, style: {
                                                    opacity: isSelected ? 0.85 : 1,
                                                    transition: 'opacity 0.3s ease',
                                                } }), _jsxs("foreignObject", { x: barX, y: segY, width: barWidth, height: segHeight, style: { overflow: 'visible', pointerEvents: 'none' }, children: [_jsx("div", { "data-tooltip-id": tooltipId, "data-tooltip-placement": "right", style: {
                                                            width: barWidth,
                                                            height: segHeight,
                                                            pointerEvents: 'all',
                                                        }, onClick: () => handleSegmentClick(item?.label, segment, segIndex) }), _jsxs("div", { id: tooltipId, className: "ff-stacked-bar-tooltip-content", style: { display: 'none' }, children: [_jsx(Typography, { as: "div", fontWeight: "semi-bold", children: item?.label }), _jsxs("div", { className: "ff-stacked-bar-tooltip-row", children: [_jsx(Typography, { fontWeight: "semi-bold", children: segment.key }), _jsxs(Typography, { fontWeight: "semi-bold", children: [": ", segment.value] })] })] })] })] }, segment?.key));
                                }), showXAxisLabels && (_jsx("foreignObject", { x: barX + barWidth / 2 - xAxisLabelWidth / 2, y: height + topPadding + 5, width: xAxisLabelWidth, height: 20, className: "ff-stacked-bar-x-label-wrapper", style: {
                                        color: isSelected ? 'var(--brand-color)' : 'black',
                                        fontWeight: isSelected ? 'bold' : 'normal',
                                    }, children: _jsx(AutoTruncateText, { className: "ff-stacked-bar-x-label", children: item?.label }) }))] }, barIndex));
                    }), _jsx("line", { x1: leftPadding, y1: height + topPadding, x2: chartWidth, y2: height + topPadding, stroke: "var(--ff-comment-border-color)", strokeWidth: "1" }), xAxisLabel && (_jsx("text", { x: chartWidth / 2, y: height + topPadding + (showXAxisLabels ? 40 : 20), textAnchor: "middle", className: "ff-stacked-bar-label", children: xAxisLabel })), yAxisLabel && (_jsx("text", { x: -(height / 2 + topPadding), y: 15, transform: "rotate(-90)", textAnchor: "middle", className: "ff-stacked-bar-label", children: yAxisLabel }))] }), legend && legendPosition === 'bottom' && renderLegend()] }));
};
export default StackedBarChart;
//# sourceMappingURL=StackedBarChart.js.map