import ApexCharts from "apexcharts";
import { merge } from "merge-anything";
import { on, createEffect, createSignal, onCleanup } from "solid-js";
import { unwrap } from "solid-js/store";
const apexChartsEvents = [
    "animationEnd",
    "beforeMount",
    "mounted",
    "updated",
    "click",
    "mouseMove",
    "mouseLeave",
    "legendClick",
    "markerClick",
    "selection",
    "dataPointSelection",
    "dataPointMouseEnter",
    "dataPointMouseLeave",
    "beforeZoom",
    "beforeResetZoom",
    "zoomed",
    "scrolled",
    "brushScrolled",
];
export function useApexCharts(props) {
    const [chart, setChart] = createSignal();
    const [target, setTarget] = createSignal();
    function initializeChart() {
        if (!target()) {
            return;
        }
        const events = apexChartsEvents.reduce((events, event) => {
            const solidEvent = `on${event[0].toUpperCase()}${event.slice(1)}`;
            function callback(...args) {
                props[solidEvent]?.(...args);
            }
            return { ...events, [event]: callback };
        }, {});
        const newOptions = {
            chart: {
                events,
                type: props.type || "line",
                width: props.width || "100%",
                height: props.height || "auto",
            },
            series: unwrap(props.series),
        };
        const config = merge(unwrap(props.options || {}), newOptions);
        const newChart = new ApexCharts(target(), config);
        setChart(newChart);
        newChart.render();
    }
    createEffect(() => {
        if (target()) {
            return initializeChart();
        }
    });
    createEffect(on(() => [...props.series].map((serie) => unwrap(serie)), (series) => {
        if (chart()) {
            return chart().updateSeries(series);
        }
    }, { defer: true }));
    createEffect(on(() => unwrap(props.options), (options) => {
        if (chart()) {
            return chart().updateOptions(options);
        }
    }, { defer: true }));
    createEffect(on(() => [props.type, props.height, props.width], () => {
        if (target()) {
            return initializeChart();
        }
    }, { defer: true }));
    onCleanup(() => {
        if (chart()) {
            chart().destroy();
        }
    });
    return [setTarget, chart];
}
export function ApexChart(props) {
    const [ref] = useApexCharts(props);
    return <div ref={ref} class="solid-chart"></div>;
}
export * from "./interfaces";