import React from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
import DonutChartStyles from './DonutChartStyles';
function DonutChart(props) {
    const { colorChart = ['#7857FF', '#00C49F', '#FFBB28', '#FF8042'], dataKey, withChart, data, hiddenLabel = true, pieType, } = props;
    const RADIAN = Math.PI / 180;
    const renderCustomizedLabel = ({ cx, cy, innerRadius, midAngle, outerRadius, payload, percent }) => {
        const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
        const labelRadius = outerRadius + 20;
        const labelRadiusY = outerRadius + 30;
        const labelX = cx + labelRadius * Math.cos(-midAngle * RADIAN);
        const labelY = cy + labelRadiusY * Math.sin(-midAngle * RADIAN);
        const x = cx + radius * Math.cos(-midAngle * RADIAN);
        const y = cy + radius * Math.sin(-midAngle * RADIAN);
        const maxWidth = 100;
        return (React.createElement(React.Fragment, null,
            pieType === 'pie-custom-label' ? (React.createElement("foreignObject", { className: 'hidden xl:block', x: labelX > cx ? labelX : labelX - maxWidth, y: labelY - 20, width: maxWidth, height: 60 },
                React.createElement("div", { className: `
              text-[#999] text-xs leading-[1.2] break-words overflow-wrap-anywhere
              ${labelX > cx ? 'text-left' : 'text-right'}
            `, style: {
                        wordWrap: 'break-word',
                        overflowWrap: 'break-word',
                        hyphens: 'auto',
                    } }, payload.name))) : (React.createElement("text", { className: 'hidden sm:block', dominantBaseline: 'central', fill: '#999', textAnchor: labelX > cx ? 'start' : 'end', x: labelX, y: labelY }, payload.name)),
            hiddenLabel && (React.createElement("text", { dominantBaseline: 'central', fill: 'white', textAnchor: x > cx ? 'start' : 'end', x: x, y: y }, `${(percent * 100).toFixed(0)}%`))));
    };
    const CustomToolLegend = (propsTooltip) => {
        const { payload } = propsTooltip;
        return (React.createElement("div", { className: 'custom-legend relative mt-4 h-20' },
            React.createElement("div", { className: `absolute bottom-0 right-0 flex flex-wrap gap-2 xl:justify-start xl:justify-end 
            ${pieType === 'pie-custom-label' ? 'sm:justify-start' : ''}` }, payload === null || payload === void 0 ? void 0 : payload.map((item) => (React.createElement("div", { key: item.id, className: 'p-1 rounded-md' },
                React.createElement("div", { className: 'flex items-center' },
                    React.createElement("div", { className: 'rounded w-[14px] h-[14px] flex items-center', style: {
                            background: `linear-gradient(${item.color}, ${item.color})`,
                        } }),
                    React.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;
        const { payload } = propsTooltip;
        return (React.createElement("div", { style: {
                backgroundColor: '#f5f5f5e8',
                margin: 10,
                width: '10rem',
                padding: 3,
                borderRadius: 8,
            } },
            React.createElement("div", { className: 'ml-2 mt-2' }, (_b = (_a = payload[0]) === null || _a === void 0 ? void 0 : _a.payload) === null || _b === void 0 ? void 0 : _b.name),
            payload.map((item) => (React.createElement("div", { key: item.id, className: 'flex items-start gap-2 p-1 ml-1' },
                React.createElement("div", { className: 'rounded w-[14px] h-[14px] flex-shrink-0 mt-1', style: { backgroundColor: item.payload.fill } }),
                React.createElement("div", { className: 'flex-1 leading-normal break-words mt-0.5' }, item.name),
                React.createElement("div", { className: 'ml-auto' }, item.payload.value))))));
    };
    const colors = data.reduce((color, _, index) => {
        color[`color${index + 1}`] = colorChart[index % colorChart.length];
        return color;
    }, {});
    return (React.createElement(React.Fragment, null,
        React.createElement(DonutChartStyles, null),
        React.createElement(ResponsiveContainer, { height: 410, width: '100%' },
            React.createElement(PieChart, { height: 400, width: 400 },
                React.createElement(Pie
                // @ts-ignore
                , { 
                    // @ts-ignore
                    color: colors, cx: '50%', cy: '50%', data: data, 
                    // @ts-ignore
                    dataKey: dataKey !== null && dataKey !== void 0 ? dataKey : 'value', fill: '#8884d8', label: renderCustomizedLabel, labelLine: false, outerRadius: withChart !== null && withChart !== void 0 ? withChart : 150, style: { outline: 'none' }, strokeWidth: 2, isAnimationActive: false }, data.map((_entry, index) => (React.createElement(Cell, { key: `cell-${index}`, fill: colorChart[index % colorChart.length] })))),
                React.createElement(Legend, { content: React.createElement(CustomToolLegend, null) }),
                React.createElement(Tooltip, { content: React.createElement(CustomToolTip, null) })))));
}
export default DonutChart;
//# sourceMappingURL=DonutChart.js.map