import { jsx as _jsx } from "react/jsx-runtime";
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Filler, Title, Tooltip, Legend, } from "chart.js";
import { Scatter } from "react-chartjs-2";
import "./style.scss";
ChartJS.register(CategoryScale, Filler, LinearScale, BarElement, PointElement, LineElement, Title, Tooltip, Legend);
function StatsChart({ stats, median, xStepSize, yStepSize, xLabel, yLabel, chartType, displayYAxis = true, }) {
    const getLabel = (label) => {
        if (chartType === "pay") {
            return `$${label}`;
        }
        else if (chartType === "experience") {
            return `${label} years`;
        }
        return label;
    };
    const options = {
        responsive: true,
        aspectRatio: 0,
        maintainAspectRatio: true,
        interaction: {
            mode: "index", // or "x"
            intersect: false
        },
        scales: {
            y: {
                display: displayYAxis,
                grace: "40%",
                beginAtZero: true,
                ticks: {
                    stepSize: yStepSize,
                    display: true,
                    color: "#868686",
                    font: {
                        family: "Inter",
                        size: 14,
                        weight: 400,
                    },
                    padding: 15,
                },
                title: {
                    display: true,
                    text: yLabel,
                    color: "#adadad",
                    font: {
                        family: "Inter",
                        size: 16,
                        weight: "500",
                    },
                },
            },
            x: {
                grid: {
                    color: "#49494933",
                    display: true,
                },
                ticks: {
                    display: true,
                    stepSize: xStepSize,
                    color: "#868686",
                    font: {
                        family: "Inter",
                        size: 14,
                        weight: 400,
                    },
                    align: "start",
                    padding: 15,
                },
                title: {
                    display: true,
                    text: xLabel,
                    color: "#adadad",
                    font: {
                        family: "Inter",
                        size: 16,
                        weight: "500",
                    },
                },
            },
        },
        plugins: {
            legend: {
                display: false,
            },
            tooltip: {
                displayColors: false,
                position: "nearest",
                callbacks: {
                    title: () => "",
                    label: (tooltipItem) => {
                        const label = tooltipItem.label || "";
                        return getLabel(label);
                    },
                },
                backgroundColor: "#d5d5d5",
                bodyColor: "#000",
                bodyFont: {
                    size: 14,
                    family: "Inter",
                },
                padding: 10,
                borderWidth: 1,
                cornerRadius: 3,
                filter: function (tooltipItem) {
                    return tooltipItem.datasetIndex === 0;
                }
            },
            title: {
                display: false,
            },
            filler: {
                propagate: true,
            },
        },
    };
    let medianY = 0;
    if (stats.length > 1) {
        for (let i = 1; i < stats.length; i++) {
            if (stats[i].x >= median && stats[i - 1].x <= median) {
                const x1 = stats[i - 1].x;
                const y1 = stats[i - 1].y;
                const x2 = stats[i].x;
                const y2 = stats[i].y;
                const rateOfChange = (y2 - y1) / (x2 - x1);
                medianY = y1 + rateOfChange * (median - x1);
                break;
            }
        }
    }
    const data = {
        datasets: [
            {
                type: "line",
                fill: true,
                label: "",
                data: stats,
                pointBackgroundColor: "transparent",
                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(35, 35, 35, 0)");
                    return gradient;
                },
                borderColor: "#FF8D4E",
                borderWidth: 1,
                showLine: true,
                tension: 0.2,
                radius: 0,
                pointHoverRadius: 0,
            },
            {
                type: "line",
                fill: true,
                label: "",
                data: [
                    {
                        x: median,
                        y: medianY,
                    },
                ],
                pointBackgroundColor: "#FF8D4E",
                borderColor: "#FF8D4E",
                borderWidth: 2,
                tension: 0.2,
                radius: 6,
                pointHoverRadius: 8,
            },
        ],
    };
    return (_jsx("div", { className: "PersonStatisticsChart", children: _jsx("div", { children: _jsx(Scatter, { options: options, data: data }) }) }));
}
export default StatsChart;
