import { jsx as _jsx } from "react/jsx-runtime";
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Filler, Title, Tooltip, Legend, } from "chart.js";
import { Chart } from "react-chartjs-2";
import { formatterForUSD } from "../../../utils";
ChartJS.register(CategoryScale, Filler, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
function AreaChart({ values, valuesFormatter = formatterForUSD, xStepSize, yStepSize, }) {
    const transformedValues = values.flatMap((item) => Object.keys(item).map((key) => ({ key: key, value: item[key] })));
    const options = {
        responsive: true,
        aspectRatio: 4.5,
        maintainAspectRatio: true,
        scales: {
            y: {
                grace: "40%",
                border: {
                    color: "transparent",
                },
                grid: {
                    lineWidth: 2,
                    color: "#49494933",
                    tickColor: "transparent",
                },
                ticks: {
                    callback: function (value) {
                        const numericValue = typeof value === "string" ? parseInt(value, 10) : value;
                        return valuesFormatter.format(numericValue);
                    },
                    align: "start",
                    color: "#ADADAD",
                    count: 3,
                    stepSize: yStepSize,
                    font: {
                        family: "Rubik",
                        size: 14,
                        weight: 400,
                        lineHeight: "21px",
                    },
                },
            },
            x: {
                offset: true,
                grid: {
                    display: false,
                },
                ticks: {
                    color: "#868686",
                    stepSize: xStepSize,
                    font: {
                        family: "Rubik",
                        size: 14,
                        weight: 400,
                        lineHeight: "21px",
                    },
                },
            },
        },
        plugins: {
            legend: {
                display: false,
            },
            tooltip: {
                callbacks: {
                    title: function () {
                        return "";
                    },
                    label: function (context) {
                        const label = context.parsed.y;
                        return label ? formatterForUSD.format(label) : "$0";
                    },
                },
                bodyColor: "#FF8D4E",
                bodyFont: {
                    family: "Inter",
                    size: 12,
                    weight: 300,
                    lineHeight: "18px",
                },
                displayColors: false,
                enabled: true,
                backgroundColor: "transparent",
                titleColor: "white",
                position: "nearest",
                xAlign: "center",
                yAlign: "bottom",
            },
            title: {
                display: false,
            },
            filler: {
                propagate: true,
            },
        },
    };
    const datasets = {
        datasets: [
            {
                type: "line",
                data: transformedValues,
                parsing: {
                    xAxisKey: "key",
                    yAxisKey: "value",
                },
                pointBackgroundColor: "#331C10",
                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",
                borderWidth: 2,
                fill: true,
                spanGaps: true,
            },
        ],
    };
    return (_jsx(Chart, { type: "line", id: "area-chart", data: datasets, options: options }));
}
export default AreaChart;
