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";
import { compactNumber } from "../../utils";
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler);
const PayChart = ({ inputLabels = [], inputValues = [], titleSet = [], symbol = "", }) => {
    const options = {
        elements: {
            point: {
                radius: 12,
                hoverRadius: 12,
                borderWidth: 0,
                hoverBorderWidth: 1,
            },
        },
        scales: {
            y: {
                ticks: {
                    padding: 20,
                    color: "#FAFAFA",
                    callback: function (value, index) {
                        if (index % 2 === 0)
                            return;
                        if (typeof value === "number") {
                            return `${symbol}${compactNumber.format(value)}`;
                        }
                        else {
                            return `${symbol}${compactNumber.format(parseInt(value, 10))}`;
                        }
                    },
                    font: {
                        size: 16,
                        weight: 400,
                        family: "Inter",
                    },
                },
                grid: {
                    display: false,
                },
                border: {
                    display: false,
                },
            },
            x: {
                ticks: {
                    padding: 20,
                    color: "#FAFAFA",
                    font: {
                        size: 16,
                        weight: 400,
                        family: "Inter",
                    },
                },
                grid: {
                    display: false,
                },
                border: {
                    display: false,
                },
            },
        },
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false,
            },
            tooltip: {
                displayColors: false,
                bodySpacing: 10,
                callbacks: {
                    title: function (tooltipItems) {
                        const datasetIndex = tooltipItems[0].dataIndex;
                        return titleSet[datasetIndex];
                    },
                    label: function (tooltipItems) {
                        const datasetIndex = tooltipItems.dataIndex;
                        const val = inputValues[datasetIndex];
                        return `${symbol}${compactNumber.format(val)}`;
                    },
                },
                backgroundColor: "#c1c1c1",
                titleColor: "#232323",
                bodyColor: "#232323",
            },
            title: {
                display: false,
            },
        },
        backgroundColor: "red",
    };
    const labels = inputLabels;
    const data = {
        labels,
        datasets: [
            {
                label: "",
                data: inputValues,
                borderColor: "#FF8D4E",
                pointBackgroundColor: "#FFE0CF",
                backgroundColor: (context) => {
                    const ctx = context.chart.ctx;
                    const gradient = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
                    gradient.addColorStop(0, "rgba(255, 141, 78, 0.20)");
                    gradient.addColorStop(0.9904, "rgba(73, 73, 73, 0.00)");
                    return gradient;
                },
                pointRadius: 6,
                pointHoverRadius: 8,
                fill: true,
                tension: 0.5,
                cubicInterpolationMode: "monotone",
                capBezierPoints: true,
                borderJoinStyle: "miter",
                spanGaps: true,
            },
        ],
    };
    return _jsx(Line, { options: options, data: data });
};
export default PayChart;
