import { jsx as _jsx } from "react/jsx-runtime";
import { Chart as ChartJS, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend, } from "chart.js";
// import { useEffect } from "react";
import { Radar } from "react-chartjs-2";
ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend);
const RadarChart = ({ inputData = [] }) => {
    const options = {
        responsive: true,
        aspectRatio: 3,
        maintainAspectRatio: true,
        beginAtZero: 0,
        scales: {
            r: {
                pointLabels: {
                    color: "rgba(193, 193, 193, 1)",
                    font: {
                        size: 14,
                        weight: 400,
                        family: "Inter",
                    },
                    padding: 20,
                },
                ticks: {
                    display: false,
                    count: 4,
                    max: 3,
                    padding: 5,
                },
                angleLines: {
                    display: true,
                    color: (context) => {
                        const ctx = context.chart.ctx;
                        const gradient = ctx.createLinearGradient(400, 0, 500, 800);
                        gradient.addColorStop(0, "rgba(124, 124, 124, 0.7)");
                        gradient.addColorStop(1, "rgba(73, 73, 73, 0)");
                        return gradient;
                    },
                },
                grid: {
                    display: true,
                    color: (context) => {
                        const ctx = context.chart.ctx;
                        const gradient = ctx.createLinearGradient(400, 0, 500, 800);
                        gradient.addColorStop(0, "rgba(124, 124, 124, 0.5)");
                        gradient.addColorStop(1, "rgba(73, 73, 73, 0)");
                        return gradient;
                    },
                    circular: true,
                    borderDash: [5, 1],
                    borderDashOffset: 0.5,
                    lineWidth: 1,
                },
                // suggestedMin: 9,
                // suggestedMax: 6,
            },
        },
        plugins: {
            legend: {
                display: false,
            },
            tooltip: {
                enabled: true,
                backgroundColor: "transparent",
                titleColor: "white",
                position: "nearest",
                xAlign: "center",
                yAlign: "bottom",
                // filter: function (tooltipItem: any) {
                //   return tooltipItem.datasetIndex !== 0; // Disable tooltip for dataset index 0
                // },
            },
            title: {
                display: false,
            },
            filler: {
                propagate: true,
            },
        },
    };
    const label = inputData.map((labels) => labels.key);
    const values = inputData.map((value) => value.value);
    const data = {
        labels: label,
        datasets: [
            {
                label: "",
                data: values,
                fill: true,
                backgroundColor: (context) => {
                    const ctx = context.chart.ctx;
                    const gradient = ctx.createLinearGradient(400, 0, 500, 800);
                    gradient.addColorStop(0, "rgba(255, 141, 78, 0.2)");
                    gradient.addColorStop(1, "rgba(73, 73, 73, 0)");
                    return gradient;
                },
                borderColor: "rgba(255, 141, 78, 1)",
                borderWidth: 1,
                radius: 0,
                pointHoverRadius: 3,
            },
        ],
    };
    return _jsx(Radar, { data: data, options: options });
};
export default RadarChart;
