/**
 * Ecommerce copilot
 *
 * @author    businesstech.fr <modules@businesstech.fr> - https://www.businesstech.fr/
 * @copyright https://www.businesstech.fr/
 * @license   see file: LICENSE.txt
 *
 *           ____    _______
 *          |  _ \  |__   __|
 *          | |_) |    | |
 *          |  _ <     | |
 *          | |_) |    | |
 *          |____/     |_|
 */

function updateProductDescriptionContent(value, contentElementId) {
    var contentElement = document.getElementById(contentElementId);
    if (contentElement) {
        contentElement.innerHTML = value;
    }
}

document.addEventListener('DOMContentLoaded', function () {
    //Init the form
    // Get the current step value
    const step = parseInt(document.getElementById("step").value);


    function attachOnInputEvent() {
        $('#productDescription').on('input', function() {
            updateProductDescriptionContent(this.value, 'productDescriptionOverview');
        });
    }
    attachOnInputEvent();

    // Define an object to map step numbers to corresponding form visibility
    const formVisibility = {
        1: { show: "generateForm", hide: ["editForm", "savedForm"] },
        2: { show: "editForm", hide: ["generateForm", "savedForm"] },
        3: { show: "savedForm", hide: ["generateForm", "editForm"] }
    };

    // Check if the step is valid (1, 2, or 3)
    if (formVisibility[step]) {
        // Show the form for the current step
        $(`#${formVisibility[step].show}`).removeClass('d-none');

        // Hide other forms
        formVisibility[step].hide.forEach(form => $(`#${form}`).addClass('d-none'));

        // Always hide these elements
        $("#no-valid-sub, #new-generation").addClass('d-none');
    }

    // handle hide and show for field
    // Handle change event for generate type selection
    $("#generateType").on("change", function() {
        // Hide all search blocks initially
        $("#category-search-block, #product-search-block, #cms-search-block").addClass('d-none');

        // Show appropriate search block based on selected value
        switch(this.value) {
            case 'long-description':
            case 'short-description':
            case 'meta-description':
                $("#product-search-block").removeClass('d-none');
                break;
            case 'category-description':
            case 'category-additional-description':
            case 'category-meta-description':
                $("#category-search-block").removeClass('d-none');
                break;
            case 'cms-page-content':
                $("#cms-search-block").removeClass('d-none');
                break;
        }
    });

    // Handle description generation
    $("#generateDescription").on("click", function (event) {
        const elementId = $("#elementId").val();
        const generateType = $("#generateType").val();
        const idLang = $("#idLang").val();

        // Validate input
        if (!elementId) {
            event.preventDefault();
            $("#id_product_search, #id_product").css({color: 'red', backgroundColor: '#f8d7da'});
            return;
        }

        // Reset styles
        $("#id_product_search, #id_product").css({color: '#555', backgroundColor: '#fff'});

        // AJAX request to generate description
        $.ajax({
            type: "POST",
            url: btEcop.ajaxUrl,
            dataType: "json",
            data: {
                ajax: "1",
                action: "generateDescription",
                elementId: elementId,
                generateType: generateType,
                idLang: idLang,
                token: $("input[name=token]").val(),
            },
            beforeSend: function () {
                // Show loader and hide form
                $("#loaderBlock").removeClass('d-none');
                $("#generateForm, #stepper").addClass('d-none');
            },
            success: function (res) {
                // Hide loader and show form
                $("#loaderBlock").addClass('d-none');
                $("#generateForm, #stepper").removeClass('d-none');
                attachOnInputEvent();

                // Handle invalid data
                if (res.hasInvalidData) {
                    $("#invalidData").removeClass('d-none').html(res.errorMessage);
                    return;
                }

                // Handle generated data
                if (res.hasGeneratedData) {
                    // Update form fields
                    $("#step").val(res.step);
                    $("#productIdToSave").val(elementId);
                    $("#generateTypeToSave").val(generateType);
                    $("#idLangToSave").val(idLang);

                    // Update UI based on step
                    updateUIForStep(res.step, res);
                }
            },
            error: function (res) {
                // Handle error
                if (res.hasInvalidData) {
                    $("#loaderBlock").addClass('d-none');
                    $("#generateForm, #stepper").removeClass('d-none');
                    $("#invalidData").removeClass('d-none').html(res.errorMessage);
                }
            },
        });
    });

    // Function to update UI based on step
    function updateUIForStep(step, res) {
        // Reset all steps
        $('.step').removeClass('active complete').addClass('disable');

        // Update UI elements based on step
        switch(step) {
            case 1:
                $('#step1').addClass('complete');
                $("#generateForm, #generatedData").removeClass('d-none');
                $("#editForm, #savedForm").addClass('d-none');
                $("#generatedData").html(res.successMessage);
                break;
            case 2:
                $('#step1').addClass('complete');
                $('#step2').removeClass('disable').addClass('active');
                $("#editForm").removeClass('d-none');
                $("#generateForm, #savedForm").addClass('d-none');
                if (res.description) {
                    $("#productDescription").val(res.description);
                    $("#productDescriptionOverview").html(res.description);
                    $("#generatedEditData").removeClass('d-none').html(res.successMessage);
                } else {
                    $("#generatedData, #about, #output, #save-section").addClass('d-none');
                    $("#no-valid-sub, #new-generation").removeClass('d-none');
                }
                break;
            case 3:
                $('#step1, #step2').addClass('complete');
                $('#step3').removeClass('disable').addClass('active');
                $("#savedForm").removeClass('d-none');
                $("#generateForm, #editForm").addClass('d-none');
                break;
        }
    }

    // Step 2 form handle
    $("#saveProduct").bind("click", function (event) {
        var canSubmit = true;
        var productDescription = document.getElementById("productDescription");

        if (document.getElementById("productDescription").value == '') {
            event.preventDefault();
            productDescription.style.cssText += 'color:red;background-color:#f8d7da';
            canSubmit = false;
        }

        if (canSubmit === true) {

            $.ajax({
                type: "POST",
                url: btEcop.ajaxUrl,
                dataType: "json",
                data: {
                    ajax: "1",
                    action: "generateSavedProductAfterPreview",
                    productId: document.getElementById("productIdToSave").value,
                    productDescription: document.getElementById("productDescription").value,
                    generateType: document.getElementById("generateTypeToSave").value,
                    idLang: document.getElementById("idLangToSave").value,
                    token: $("input[name=token]").val(),
                },
                beforeSend: function () {
                    $("#loaderBlock").removeClass('d-none');
                    $("#editForm").addClass('d-none');
                    $("#editForm").slideUp();
                    $("#stepper").addClass('d-none');
                },
                success: function (res) {
                    $("#loaderBlock").addClass('d-none');
                    $("#editForm").slideDown();
                    $("#editForm").removeClass('d-none');
                    $("#stepper").removeClass('d-none');

                    if (res.hasInvalidData == true) {
                        $("#invalidData").removeClass('d-none');
                        $("#invalidData").append().html(res.errorMessage);
                    }

                    if (res.hasGeneratedData == true) {

                        //update the step field
                        document.getElementById("step").value = res.step;

                        if (res.step == 1) {
                            $("#generateForm").removeClass('d-none');
                            $("#generatedData").removeClass('d-none').append().html(res.successMessage);
                            $("#editForm").addClass('d-none');
                            $("#savedForm").addClass('d-none');
                            $('#step1').removeClass('active');
                            $('#step1').addClass('complete');
                            $('#step2').removeClass('disable');
                            $('#step2').addClass('active');
                        } else if (res.step == 2) {
                            $("#generateForm").addClass('d-none');
                            $("#editForm").removeClass('d-none');
                            $("#generatedEditData").removeClass('d-none').append().html(res.successMessage);
                            $("#savedForm").addClass('d-none');
                            $('#step1').removeClass('active');
                            $('#step1').addClass('complete');
                            $('#step2').removeClass('disable');
                            $('#step2').addClass('active');
                        } else if (res.step == 3) {
                            $("#generateForm").addClass('d-none');
                            $("#editForm").addClass('d-none');
                            $("#savedForm").removeClass('d-none');
                            $('#step1').removeClass('active');
                            $('#step1').addClass('complete');
                            $('#step2').removeClass('active');
                            $('#step2').addClass('complete');
                            $('#step3').removeClass('disable');
                            $('#step3').addClass('active');
                        }
                    }

                },
            });
        }
    });
});