import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler, Title, Tooltip, Legend, 
// ScriptableContext,
LineController, BarController, } from "chart.js";
import { Chart } from "react-chartjs-2";
import "./style.scss";
import { formatterForUSD } from "../../utils";
ChartJS.register(CategoryScale, Filler, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, LineController, BarController, BarElement);
export const options = {
    responsive: true,
    aspectRatio: 5,
    maintainAspectRatio: true,
    element: {
        point: {
            backgroundColor: "#331C10",
            borderColor: "#FF8D4E",
        },
    },
    scales: {
        y: {
            grace: "40%",
            beginAtZero: true,
            border: {
                color: "transparent",
                position: "center",
            },
            grid: {
                color: "#232323",
                borderColor: "grey",
                tickColor: "transparent",
            },
            ticks: {
                callback: function (value) {
                    formatterForUSD.format(value);
                    return formatterForUSD.format(value).replace("$", "");
                },
                font: {
                    family: "Rubik",
                    size: 14,
                    weight: 400,
                    lineHeight: "21px",
                },
                align: "start",
                color: "#ADADAD",
                count: 4,
                offset: true,
            },
        },
        x: {
            grid: {
                display: false,
            },
            ticks: {
                color: "#868686",
                font: {
                    family: "Rubik",
                    size: 14,
                    weight: 400,
                    lineHeight: "21px",
                },
            },
        },
    },
    plugins: {
        legend: {
            display: false,
        },
        tooltip: {
            callbacks: {
                title: function (tooltipItems) {
                    // console.log(tooltipItems[0]);
                    tooltipItems[0].formattedValue = formatterForUSD
                        .format(tooltipItems[0].raw)
                        .replace("$", "");
                    return "";
                },
            },
            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,
        },
    },
};
export const CompanyCombinedChartFinancialTab = ({ revenues, 
// stockPerformances,
earnings, QoQlatest, aspectRatio = 5, }) => {
    const labels = revenues.map((revenue) => revenue.quater);
    const valuesRevenue = revenues.map((revenue) => revenue.amount);
    // const valuesPerformance = stockPerformances.map(
    //   (stockPerformance) => stockPerformance.amount
    // );
    const valuesEarnings = earnings.map((earning) => earning.amount);
    const data = {
        labels,
        datasets: [
            // {
            //   type: "line" as const,
            //   fill: true,
            //   label: "",
            //   data: valuesPerformance,
            //   pointBackgroundColor: "#331C10",
            //   backgroundColor: (context: ScriptableContext<"line">) => {
            //     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",
            //   borderWidth: 1,
            //   showLine: true,
            // },
            {
                type: "bar",
                label: "",
                data: valuesEarnings,
                borderWidth: 2,
                backgroundColor: "#e8e8e8",
                barThickness: 18,
                maxBarThickness: 27,
                hoverBorderColor: "#CC713E",
            },
            {
                type: "bar",
                label: "",
                data: valuesRevenue,
                borderWidth: 2,
                backgroundColor: "#4b4b4b",
                barThickness: 27,
                maxBarThickness: 27,
                hoverBorderColor: "#CC713E",
            },
        ],
    };
    return (_jsxs("div", { className: "CompanyCombinedChartFinancialTab", children: [_jsxs("div", { className: "legendContainer", children: [_jsxs("div", { className: "box", children: [_jsx("div", { className: "profitSquare" }), _jsx("span", { className: "text", children: "Profit" })] }), _jsxs("div", { className: "box", children: [_jsx("div", { className: "revenueSquare" }), _jsx("span", { className: "text", children: "Revenue" })] })] }), _jsx("div", { className: "qoQGrowth", children: _jsxs("span", { className: "percentage", children: [QoQlatest ? `${QoQlatest}%` : "--", " ", _jsx("br", {}), " ", _jsx("span", { className: "qoQGrowthlatest", children: "YoY Growth latest" })] }) }), _jsx(Chart, { id: "canvas", type: "bar", options: { ...options, aspectRatio }, data: data })] }));
};
export default CompanyCombinedChartFinancialTab;
