import { jsx as _jsx } from "react/jsx-runtime";
import "./style.scss";
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler, } from "chart.js";
import { Line } from "react-chartjs-2";
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler);
const PersonViewGrowthChart = ({ inputLabels = [], targetValues = [], comparisonValues = [], }) => {
    const options = {
        // elements: {
        //   point: {
        //     radius: 0,
        //     hoverRadius: 0,
        //     borderWidth: 0,
        //     hoverBorderWidth: 0,
        //   },
        // },
        // scales: {
        //   y: {
        //     ticks: {
        //       padding: 20,
        //       display: false,
        //     },
        //     grid: {
        //       display: false,
        //     },
        //   },
        //   x: {
        //     ticks: {
        //       padding: 20,
        //     },
        //     grid: {
        //       color: "#32552557",
        //       drawTicks: false,
        //     },
        //   },
        // },
        // responsive: true,
        // tension: 0.4,
        // plugins: {
        //   legend: {
        //     display: false,
        //   },
        //   title: {
        //     display: false,
        //   },
        // },
        responsive: true,
        aspectRatio: 0,
        maintainAspectRatio: true,
        tension: 0.4,
        elements: {
            point: {
                radius: 0,
                hoverRadius: 0,
                borderWidth: 0,
                hoverBorderWidth: 0,
            },
        },
        scales: {
            y: {
                grace: "40%",
                ticks: {
                    display: false,
                },
                grid: {
                    display: false,
                },
            },
            x: {
                ticks: {
                    font: {
                        family: "Inter",
                        size: 12,
                        weight: 500,
                        lineHeight: "18px",
                    },
                    color: "white",
                },
                grid: {
                    color: "rgba(55, 55, 55, 1)",
                    drawTicks: false,
                },
            },
        },
        plugins: {
            legend: {
                display: true,
                align: "end",
            },
            tooltip: {
                enabled: true,
                backgroundColor: "transparent",
                titleColor: "white",
                position: "nearest",
                xAlign: "center",
                yAlign: "bottom",
            },
            title: {
                display: false,
            },
            filler: {
                propagate: true,
            },
        },
    };
    const labels = inputLabels;
    const data = {
        labels,
        datasets: [
            {
                label: "Prospect Growth",
                data: targetValues,
                // pointBackgroundColor: (context: any) => {
                //   const index = context.dataIndex;
                //   return index === context.dataset.data.length - 1
                //     ? "red"
                //     : "transparent";
                // },
                // radius: (context: any) => {
                //   const index = context.dataIndex;
                //   return index === context.dataset.data.length - 1 ? 5 : 0;
                // },
                borderColor: (context) => {
                    const ctx = context.chart.ctx;
                    const gradient = ctx.createLinearGradient(50, 0, 200, 100);
                    gradient.addColorStop(0.3, "rgba(255, 255, 255, 0.3)");
                    gradient.addColorStop(1, "rgba(255, 141, 78, 0.7)");
                    gradient.addColorStop(0.3, "rgba(255, 255, 255, 0.3)");
                    return gradient;
                },
                borderWidth: 2,
            },
            {
                label: "Peer Growth",
                data: comparisonValues,
                borderColor: (context) => {
                    const ctx = context.chart.ctx;
                    const gradient = ctx.createLinearGradient(50, 0, 200, 100);
                    gradient.addColorStop(0.4, "rgba(132, 114, 105, 0.5)");
                    gradient.addColorStop(0.1, "rgba(241, 220, 208, 0.7)");
                    gradient.addColorStop(0.6, "rgba(139, 130, 125, 0.9)");
                    return gradient;
                },
                backgroundColor: "rgba(54, 162, 235, 0.2)", // Transparent fill color
                borderWidth: 2,
            },
        ],
    };
    return _jsx(Line, { options: options, data: data });
};
export default PersonViewGrowthChart;
