import { create_dataframe, create_selection } from './methods.js';

$(document).ready(function () {
    $('#timeseries-datasets').change(function () {
        const selectedDataset = $("input[name=timeseries_dataset]:checked").val();

        if (selectedDataset) {
            resetContainers();
            toggleSkeletons(true);

            const csrfToken = $("[name=csrfmiddlewaretoken]").val();

            // AJAX request to fetch the dataset
            $.ajax({
                method: 'POST',
                url: '', // Specify your endpoint here
                headers: { 'X-CSRFToken': csrfToken },
                data: { action: "timeseries-dataset", timeseries_dataset: selectedDataset },
                success: function (response) {
                    alert("herereererer")
                    toggleSkeletons(false);
                    handleTimeseriesResponse(response);
                },
                error: function (error) {
                    toggleSkeletons(false);
                    console.error("An error occurred:", error);
                }
            });
        }
    });

    /**
     * Reset the containers by hiding any previous data.
     */
    function resetContainers() {
        const elementsToHide = [
            "#df_div", "#stats_div", "#ts_confidence_div", "#ts_stats_div"
        ];
        elementsToHide.forEach(selector => $(selector).empty().hide());
    }

    /**
     * Toggle skeleton loaders for a smooth user experience.
     * @param {boolean} show - Whether to show or hide the skeleton loaders.
     */
    function toggleSkeletons(show) {
        const skeletonSelectors = [
            "#df_skeleton", "#stats_skeleton", "#ts_confidence_skeleton", "#ts_stats_skeleton"
        ];
        skeletonSelectors.forEach(selector => $(selector).toggle(show));
    }

    /**
     * Handle the response for timeseries dataset.
     * @param {Object|string} response - The server response.
     */
    function handleTimeseriesResponse(response) {
        try {
            const data = JSON.parse(response);
            if (!data) throw new Error("Invalid response format");

            // Populate data and stats
            if (data.fig) {
                $("#ts_confidence_div").html(data.fig).show();
            }
            if (data.fig1) {
                $("#ts_stats_div").html(data.fig1).show();
            }
        } catch (error) {
            console.error("Failed to process response:", error);
        }
    }
});