import { jsx as _jsx, jsxs as _jsxs } 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 { formatterForUSD } from "../../utils";
ChartJS.register(CategoryScale, Filler, LinearScale, BarElement, PointElement, LineElement, Title, Tooltip, Legend);
export const options = {
    responsive: true,
    aspectRatio: 5,
    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).replace("$", "");
                },
                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: 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",
            filter: function (tooltipItem) {
                return tooltipItem.datasetIndex === 0;
            },
        },
        title: {
            display: false,
        },
        filler: {
            propagate: true,
        },
    },
};
export const CompanyLineChartFinancialTab = ({ stockPerformance, beta, peRatio, ePS, priceSales, weekChange, marketCap, aspectRatio = 5, }) => {
    const labels = stockPerformance.map((revenue) => revenue.quater);
    const values = stockPerformance.map((revenue) => revenue.amount);
    const data = {
        labels,
        datasets: [
            {
                type: "line",
                fill: true,
                label: "",
                data: values,
                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",
                borderCapStyle: "round",
                borderWidth: 1,
            },
        ],
    };
    return (_jsxs("div", { className: "CompanyLineChartFinancialTab", children: [_jsxs("div", { className: "marketCap", children: [_jsxs("span", { className: "percentage", children: [marketCap ? `${marketCap}` : "--", " ", _jsx("br", {}), " ", _jsx("span", { className: "qoQGrowthlatest", children: "Market Cap" })] }), _jsxs("div", { className: "performance", children: [_jsxs("span", { className: "percentage", children: [beta ? `${beta}` : "--", " ", _jsx("br", {}), " ", _jsx("span", { className: "valueInfo", children: "Beta (5Y Monthly)" })] }), _jsxs("span", { className: "percentage", children: [peRatio ? `${peRatio}` : "--", " ", _jsx("br", {}), " ", _jsx("span", { className: "valueInfo", children: "Trailing PE" })] }), _jsxs("span", { className: "percentage", children: [ePS ? `${ePS}` : "--", " ", _jsx("br", {}), " ", _jsx("span", { className: "valueInfo", children: "Trailing EPS" })] }), _jsxs("span", { className: "percentage", children: [priceSales ? `${priceSales}` : "--", " ", _jsx("br", {}), " ", _jsx("span", { className: "valueInfo", children: "Price/Sales" })] }), _jsxs("span", { className: "percentage", children: [weekChange ? `${weekChange}%` : "--", " ", _jsx("br", {}), " ", _jsx("span", { className: "valueInfo", children: "52 Week Change" })] })] })] }), _jsx(Chart, { type: "bar", id: "canvas", options: { ...options, aspectRatio }, data: data })] }));
};
export default CompanyLineChartFinancialTab;
