import React, { useMemo } from "react";
import ApexChart from "react-apexcharts";
import { formatDate } from "../utils/formatDate";
import { defaultOptions } from "./options";
import * as styles from "./styles";
export const GridGraph = ({ type = "price", series, categories, yaxis, chartType = "line", showGrid = false, markerColor, colorAssignmentRule, showYAxisAnnotation = false, height, }) => {
    var _a, _b;
    const apexOptions = useMemo(() => {
        var _a, _b, _c, _d;
        const options = Object.assign({}, defaultOptions);
        options.series = series;
        if (showGrid) {
            options.grid = Object.assign(Object.assign({}, options.grid), { show: true, borderColor: "#f0f0f3", strokeDashArray: 4, position: "back", xaxis: {
                    lines: {
                        show: true,
                    },
                }, yaxis: {
                    lines: {
                        show: true,
                    },
                } });
        }
        if (options.xaxis) {
            options.xaxis = Object.assign(Object.assign({}, options.xaxis), { categories, labels: Object.assign(Object.assign({}, options.xaxis.labels), { formatter: (value) => {
                        const regex = /^\d{4}-\d{2}$/;
                        return regex.test(value) ? formatDate(value) : value;
                    } }), tickPlacement: "on" });
        }
        if (options.yaxis && !Array.isArray(options.yaxis)) {
            if (yaxis) {
                options.yaxis = Object.assign(Object.assign({}, options.yaxis), { max: yaxis.max, min: yaxis.min, stepSize: yaxis.stepSize, title: Object.assign(Object.assign({}, options.yaxis.title), { text: (_a = yaxis.title) === null || _a === void 0 ? void 0 : _a.text }), labels: Object.assign(Object.assign({}, options.yaxis.labels), { show: (_c = (_b = yaxis.labels) === null || _b === void 0 ? void 0 : _b.show) !== null && _c !== void 0 ? _c : (_d = options.yaxis.labels) === null || _d === void 0 ? void 0 : _d.show }) });
            }
            options.yaxis = Object.assign(Object.assign({}, options.yaxis), { labels: Object.assign(Object.assign({}, options.yaxis.labels), { formatter: (value) => {
                        if (type === "percentage") {
                            if (!value)
                                return "100%";
                            return `${value + 100}%`;
                        }
                        if (!value)
                            return "";
                        return type === "price"
                            ? `$ ${value.toLocaleString("en-US", { notation: "compact" })}`
                            : `${value.toLocaleString()}`;
                    } }) });
        }
        if (markerColor) {
            options.markers = Object.assign(Object.assign({}, options.markers), { colors: [markerColor] });
        }
        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>`;
                } });
        }
        if (chartType === "bar") {
            delete options.fill;
            options.chart = Object.assign(Object.assign({}, options.chart), { type: "bar" });
            options.plotOptions = {
                bar: {
                    borderRadius: 6,
                    borderRadiusApplication: "end",
                    horizontal: false,
                    distributed: false,
                    columnWidth: "14px",
                },
            };
            options.responsive = [
                {
                    breakpoint: 600, // Adjust column width for smaller screens
                    options: {
                        chart: {
                            height: "200%",
                        },
                        plotOptions: {
                            bar: {
                                columnWidth: "55%",
                            },
                        },
                    },
                },
            ];
            options.colors = [markerColor];
            options.dataLabels = {
                enabled: false,
            };
            if (showYAxisAnnotation) {
                options.annotations = {
                    yaxis: [
                        {
                            y: 0,
                            borderColor: "#f0f0f3",
                        },
                    ],
                };
            }
        }
        if (colorAssignmentRule) {
            options.colors = [colorAssignmentRule];
        }
        return options;
    }, [type, series, categories, yaxis, markerColor]);
    return (React.createElement(ApexChart, { options: apexOptions, series: series, type: chartType, width: (_a = apexOptions.chart) === null || _a === void 0 ? void 0 : _a.width, height: height !== null && height !== void 0 ? height : (_b = apexOptions.chart) === null || _b === void 0 ? void 0 : _b.height, className: styles.container }));
};
//# sourceMappingURL=index.js.map