import React, { useState } from 'react';
import { ResponsiveContainer, PieChart, Pie, Cell, Legend, Sector } from 'recharts';
function PHXPieChart(props) {
    const { outerRadius = 150, dataKey, data, color = ['#6f8fef', '#8565ed', '#dd75c1', '#FF8042'], hiddenLabel, hiddenLegend, } = props;
    const [activeIndex, setActiveIndex] = useState(null);
    const [hoveredBar, setHoveredBar] = useState(null);
    const onPieEnter = (value, index) => {
        setActiveIndex(index);
        setHoveredBar(value.tooltipPayload[0].name);
    };
    const onMouseLeave = () => {
        setActiveIndex(null);
        setHoveredBar(null);
    };
    const RADIAN = Math.PI / 180;
    const CustomToolLegend = (propsTooltip) => {
        const { payload } = propsTooltip;
        return (React.createElement("div", { className: 'custom-legend mt-4' },
            React.createElement("div", { className: 'flex flex-wrap justify-end gap-2' }, payload === null || payload === void 0 ? void 0 : payload.map((item) => (React.createElement("div", { key: item.id, style: {
                    backgroundColor: '#F6F6F7',
                    padding: 5,
                    borderRadius: '5px',
                } },
                React.createElement("div", { style: {
                        display: 'flex',
                        alignItems: 'center',
                        opacity: !hoveredBar ? 1 : hoveredBar === item.payload.name ? 1 : 0.5,
                    } },
                    React.createElement("div", { style: {
                            borderRadius: '4px',
                            width: '18px',
                            height: '18px',
                            background: `linear-gradient(${item.color}, ${item.color})`,
                            alignItems: 'center',
                            alignContent: 'center',
                        } }),
                    React.createElement("p", { style: {
                            marginLeft: '10px',
                            fontSize: '14px',
                            marginRight: 4,
                            color: '#999',
                        } }, item === null || item === void 0 ? void 0 : item.payload.name))))))));
    };
    const renderActiveShape = (props) => {
        const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill, payload, percent } = props;
        return (React.createElement("g", null,
            React.createElement("text", { x: cx, y: cy, dy: -8, textAnchor: 'middle', fill: fill, style: { fontSize: '18px' } }, payload.name),
            React.createElement("text", { x: cx, y: cy, dy: 12, textAnchor: 'middle', fill: fill }, `(${(percent * 100).toFixed(2)}%)`),
            React.createElement(Sector, { cx: cx, cy: cy, opacity: 0.5, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle, fill: fill, cornerRadius: 5 })));
    };
    return (React.createElement(ResponsiveContainer, { height: 500, width: '100%' },
        React.createElement(PieChart, { height: 400, onMouseLeave: onMouseLeave, width: 800 },
            React.createElement(Pie, { activeIndex: activeIndex, activeShape: renderActiveShape, cx: '50%', cy: '50%', data: data, dataKey: dataKey !== null && dataKey !== void 0 ? dataKey : 'value', fill: '#8884d8', innerRadius: 130, ...(!hiddenLabel && {
                    label: ({ cx, cy, index, innerRadius, midAngle, outerRadius, value }) => {
                        var _a;
                        const radius = 25 + innerRadius + (outerRadius - innerRadius);
                        const x = cx + radius * Math.cos(-midAngle * RADIAN);
                        const y = cy + radius * Math.sin(-midAngle * RADIAN);
                        if (value === 0) {
                            return React.createElement(React.Fragment, null);
                        }
                        return (React.createElement("text", { dominantBaseline: 'central', fill: '#8884d8', textAnchor: x > cx ? 'start' : 'end', x: x, y: y }, (_a = data[index]) === null || _a === void 0 ? void 0 :
                            _a.name,
                            " (",
                            value,
                            ")"));
                    },
                }), onMouseEnter: onPieEnter, outerRadius: outerRadius, cornerRadius: 5, paddingAngle: 1, labelLine: false, style: { outline: 'none' } }, data.map((_entry, index) => (React.createElement(Cell, { key: `cell-${index + 1}`, fill: color[index % color.length] })))),
            hiddenLegend && React.createElement(Legend, { content: React.createElement(CustomToolLegend, null) }))));
}
export default PHXPieChart;
//# sourceMappingURL=PieChart.js.map