import React, { useMemo } from "react";
import ApexChart from "react-apexcharts";
import { defaultOptions } from "./options";
import * as styles from "./styles";
export const LineGraph = ({ type = "price", series, categories, yaxis, }) => {
    var _a, _b;
    const apexOptions = useMemo(() => {
        const options = Object.assign({}, defaultOptions);
        options.series = series;
        if (options.xaxis) {
            options.xaxis.categories = categories;
        }
        if (options.yaxis && !Array.isArray(options.yaxis) && yaxis) {
            options.yaxis.min = yaxis.min;
            options.yaxis.max = yaxis.max;
            options.yaxis.stepSize = yaxis.stepSize;
        }
        if (options.yaxis) {
            options.yaxis = Object.assign(Object.assign({}, options.yaxis), { labels: {
                    formatter: (value) => {
                        if (!value) {
                            return "";
                        }
                        return type === "price"
                            ? `$ ${value.toLocaleString("en-US", { notation: "compact" })}`
                            : `${value.toLocaleString()}`;
                    },
                } });
        }
        if (options.tooltip) {
            options.tooltip = Object.assign(Object.assign({}, options.tooltip), { 
                // eslint-disable-next-line @typescript-eslint/no-shadow
                custom({ series, seriesIndex, dataPointIndex }) {
                    if (!series[seriesIndex][dataPointIndex]) {
                        return "";
                    }
                    const tooltipText = type === "price"
                        ? `$ ${series[seriesIndex][dataPointIndex].toLocaleString("en-US", { notation: "compact" })}`
                        : `${series[seriesIndex][dataPointIndex].toLocaleString()}`;
                    return `<div style="padding: 5px; font-weight: bold;">${tooltipText}</div>`;
                } });
        }
        return options;
    }, [type, series, categories, yaxis]);
    return (React.createElement(ApexChart, { options: apexOptions, series: series, type: (_a = apexOptions.chart) === null || _a === void 0 ? void 0 : _a.type, width: (_b = apexOptions.chart) === null || _b === void 0 ? void 0 : _b.width, className: styles.container }));
};
//# sourceMappingURL=index.js.map