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 { Chart } from "react-chartjs-2";
import "./style.scss";
// import { useEffect } from "react";
import { formatterForUSD } from "../../../utils";
ChartJS.register(CategoryScale, Filler, LinearScale, BarElement, PointElement, LineElement, Title, Tooltip, Legend);
export const PeerSalaryChart = ({ Data1 = [], Data2 = [], data1Label = "", data2Label = "", fill = true, }) => {
    // useEffect(() => {
    //   console.log("Data1", { Data1 });
    // }, [Data1]);
    // useEffect(() => {
    //   console.log("Data2", { Data2 });
    // }, [Data2]);
    const labels = Data1.map((Xaxis) => Xaxis.Xaxis);
    const values1 = Data1.map((Yaxis) => Yaxis.Yaxis);
    const values2 = Data2.map((Yaxis) => Yaxis.Yaxis);
    const options = {
        responsive: true,
        aspectRatio: 0,
        maintainAspectRatio: true,
        scales: {
            y: {
                grace: "40%",
                beginAtZero: true,
                border: {
                    color: "transparent",
                    position: "center",
                },
                grid: {
                    color: "#232323",
                    borderColor: "grey",
                    tickColor: "transparent",
                    padding: 4,
                },
                ticks: {
                    callback: function (value) {
                        formatterForUSD.format(value);
                        return formatterForUSD.format(value);
                    },
                    align: "start",
                    color: "#ADADAD",
                    count: 4,
                    offset: true,
                    font: {
                        family: "Rubik",
                        size: 14,
                        weight: 400,
                        lineHeight: "21px",
                    },
                },
            },
            x: {
                grid: {
                    display: false,
                },
                ticks: {
                    color: "#868686",
                    font: {
                        family: "Rubik",
                        size: 14,
                        weight: 400,
                        lineHeight: "21px",
                    },
                },
            },
        },
        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 data = {
        labels: labels,
        datasets: [
            {
                type: "line",
                fill: fill,
                label: data1Label,
                data: values1,
                backgroundColor: (context) => {
                    const ctx = context.chart.ctx;
                    const gradient = ctx.createLinearGradient(0, 0, 0, 200);
                    gradient.addColorStop(0, "rgba(255, 141, 78, 0.2)");
                    gradient.addColorStop(1, "rgba(35, 35, 35, 0)");
                    return gradient;
                },
                borderColor: "#FF8D4E",
                borderCapStyle: "round",
                pointBackgroundColor: "#331C10",
                borderWidth: 2,
                radius: 3,
                pointHoverRadius: 5,
            },
            {
                type: "line",
                fill: fill,
                label: data2Label,
                data: values2,
                pointBackgroundColor: "#171616",
                backgroundColor: (context) => {
                    const ctx = context.chart.ctx;
                    const gradient = ctx.createLinearGradient(0, 0, 0, 200);
                    gradient.addColorStop(0, "rgba(152, 125, 110, 0)");
                    gradient.addColorStop(1, "rgba(152, 125, 110, 0.5)");
                    return gradient;
                },
                // borderColor: (context: ScriptableContext<"line">) => {
                //   const ctx = context.chart.ctx;
                //   const gradient = ctx.createLinearGradient(0, 0, 0, 200);
                //   gradient.addColorStop(0, "rgba(152, 125, 110, 0)");
                //   gradient.addColorStop(0.5, "rgba(255, 248, 244, 1)");
                //   gradient.addColorStop(1, "rgba(152, 125, 110, 0.5)");
                //   return gradient;
                // },
                borderColor: "#999999",
                borderCapStyle: "round",
                borderWidth: 2,
                radius: 3,
                pointHoverRadius: 5,
            },
        ],
    };
    return _jsx(Chart, { type: "bar", id: "canvas", options: options, data: data });
};
export default PeerSalaryChart;
