document.addEventListener("DOMContentLoaded", (event) => {
    const controllers = document.querySelectorAll(
        ".pt-spec-controllers button"
    );
    const contents = document.querySelectorAll(
        ".pt-spec-content-wrapper .pt-spec-item"
    );

    const setActive = (element) => {
        controllers.forEach((button) => button.classList.remove("active"));
        element.classList.add("active");
    };

    const showContent = (index) => {
        contents.forEach((content) => (content.style.display = "none"));
        contents[index].style.display = "block";
    };

    // Set initial active controller and content
    setActive(controllers[0]);
    showContent(0);

    // Use event delegation to handle click events
    document
        .querySelector(".pt-spec-controllers")
        .addEventListener("click", (event) => {
            if (event.target.tagName === "BUTTON") {
                setActive(event.target);
                showContent(Array.from(controllers).indexOf(event.target));
            }
        });
});

// const isValueHigher = (value, max) => {
//     return value >= max;
// };
// const isValueLower = (value, min) => {
//     return value <= min;
// }

const handleQuantityChange = (
    div,
    value,
    input,
    decButton,
    incButton,
    submitButton
) => {
    const min = input.getAttribute("min");
    const max = input.getAttribute("max");

    if (value <= min) {
        input.value = min;
        decButton.disabled = true;
    } else {
        decButton.disabled = false;
    }

    if (value >= max) {
        input.value = max;
        incButton.disabled = true;
    } else {
        incButton.disabled = false;
    }

    // set the value of the input field
    input.value = value;

    // get the current onClick event for the submit button
    const onClick = submitButton?.getAttribute("onClick") || "";

    if(!onClick.length) return;

    // Rebuild the onClick event with the new quantity value
    const newOnClick = `${onClick.split("quantity': '")[0]}quantity': '${value}'${onClick.split("quantity': '")[1].split("'")[1]}`;

    // set the new onClick event for the submit button
    submitButton.setAttribute("onClick", newOnClick);
};

document.addEventListener("DOMContentLoaded", () => {
    // find all the divs with the class of 'pico-add_to_cart'
    const add_to_cart_div = document.querySelectorAll(".pico-add_to_cart");

    // loop through each div
    add_to_cart_div.forEach((div) => {
        // find the submit button within the div
        const submit_button = div.querySelector('button[type="submit"]');
        // find the input field within the div for item_qty
        const item_qty = div.querySelector('input[name="item_qty"]');
        // find the button for decrementing the quantity, it's a button with the data-type of 'minus'
        const decrement_button = div.querySelector('button[data-type="minus"]');
        // find the button for incrementing the quantity, it's a button with the data-type of 'plus'
        const increment_button = div.querySelector('button[data-type="plus"]');

        // get the min value of the input field
        const min = item_qty.getAttribute("min");
        // get the max value of the input field
        const max = item_qty.getAttribute("max");

        // get the currency from the cookie with the name of 'exp__currenCook'
        const currentCurrency = document.cookie.split('; ').find(row => row.startsWith('exp__currency')).split('=')[1];
        // get the value of the input field with the name of 'item_price_field'
        const item_price = div.querySelector('input[name="item_price_field"]').value;
        // get the value of the input field with the name of 'item_name'
        const item_name = div.querySelector('input[name="item_name_field"]').value;
        // get the value of the input field with the name of 'item_sku'
        const item_sku = div.querySelector('input[name="item_sku_field"]').value;
        // get the current URL
        const item_url = window.location.href;

        // get the onclick function from the submit button
        const currentOnClick = submit_button.getAttribute("onClick") | "";

        if(!currentOnClick.length) {
            const dataLayer = `dataLayer.push({'event': 'add_to_cart', 'ecommerce': {'currency': '${currentCurrency}', 'value': '${item_price}', 'items': [{'item_id': '${item_sku}', 'item_url': '${item_url}', 'item_name': '${item_name}', 'price': '${item_price}', 'quantity': '1'}]}});`;
            submit_button.setAttribute("onClick", dataLayer);
        }

        // check if the quantity is at the minimum value, if so disable the decrement button
        if (item_qty.value <= min) {
            // set the input value to the min value
            handleQuantityChange(
                div,
                min,
                item_qty,
                decrement_button,
                increment_button,
                submit_button
            );
        }
        // check if the quantity is at the maximum value, if so disable the increment button
        if (item_qty.value >= max) {
            // set the input value to the max value
            handleQuantityChange(
                div,
                max,
                item_qty,
                decrement_button,
                increment_button,
                submit_button
            );
        }

        // add a click event listener to the decrement button
        decrement_button.addEventListener("click", () => {
            // get the current value of the input field
            let value = parseInt(item_qty.value);
            // decrement the value by 1
            value--;
            // check if the value is at the minimum value
            if (value <= min) {
                // if so, disable the decrement button
                handleQuantityChange(
                    div,
                    min,
                    item_qty,
                    decrement_button,
                    increment_button,
                    submit_button
                );
            } else {
                // if not, enable the decrement button
                handleQuantityChange(
                    div,
                    value,
                    item_qty,
                    decrement_button,
                    increment_button,
                    submit_button
                );
            }
        });

        // add a click event listener to the increment button
        increment_button.addEventListener("click", () => {
            // get the current value of the input field
            let value = parseInt(item_qty.value);
            // increment the value by 1
            value++;
            // check if the value is at the maximum value
            if (value >= max) {
                // if so, disable the increment button
                handleQuantityChange(
                    div,
                    max,
                    item_qty,
                    decrement_button,
                    increment_button,
                    submit_button
                );
            } else {
                // if not, enable the increment button
                handleQuantityChange(
                    div,
                    value,
                    item_qty,
                    decrement_button,
                    increment_button,
                    submit_button
                );
            }
        });

        // add a change event listener to the input field
        item_qty.addEventListener("change", () => {
            // get the current value of the input field
            let value = parseInt(item_qty.value);
            // check if the value is at the minimum value
            if (value <= min) {
                // if so, disable the decrement button
                handleQuantityChange(
                    div,
                    min,
                    item_qty,
                    decrement_button,
                    increment_button,
                    submit_button
                );
            } else if (value >= max) {
                // if so, disable the increment button
                handleQuantityChange(
                    div,
                    max,
                    item_qty,
                    decrement_button,
                    increment_button,
                    submit_button
                );
            } else {
                // if not, enable both buttons
                handleQuantityChange(
                    div,
                    value,
                    item_qty,
                    decrement_button,
                    increment_button,
                    submit_button
                );
            }
        });
    });
});

// wait for dom to load
document.addEventListener("DOMContentLoaded", () => {
    // find all the divs with the class of 'acc-qty-controlls'
    const acc_qty_controlls = document.querySelectorAll(".acc-qty-controlls");

    // loop through each div
    acc_qty_controlls?.forEach((div) => {
        // find the button with the data-type of 'minus'
        const decrement_button = div.querySelector('button[data-type="minus"]');
        // find the button with the data-type of 'plus'
        const increment_button = div.querySelector('button[data-type="plus"]');
        // find the input field with the name of 'item_qty'
        const item_qty = div.querySelector('input[name="item_qty"]');
        // get the min value of the input field
        const min = item_qty.getAttribute("min");
        // get the max value of the input field
        const max = item_qty.getAttribute("max");
        // get the submit button
        const submit_button = div.querySelector('button[type="submit"]');

        // check if the quantity is at the minimum value, if so disable the decrement button
        if (item_qty.value <= min) {
            // set the input value to the min value
            handleQuantityChange(
                div,
                min,
                item_qty,
                decrement_button,
                increment_button,
                submit_button
            );
        }
        // check if the quantity is at the maximum value, if so disable the increment button
        if (item_qty.value >= max) {
            // set the input value to the max value
            handleQuantityChange(
                div,
                max,
                item_qty,
                decrement_button,
                increment_button,
                submit_button
            );
        }

        // add a click event listener to the decrement button
        decrement_button.addEventListener("click", () => {
            // get the current value of the input field
            let value = parseInt(item_qty.value);
            // decrement the value by 1
            value--;
            // check if the value is at the minimum value
            if (value <= min) {
                // if so, disable the decrement button
                handleQuantityChange(
                    div,
                    min,
                    item_qty,
                    decrement_button,
                    increment_button,
                    submit_button
                );
            } else {
                // if not, enable the decrement button
                handleQuantityChange(
                    div,
                    value,
                    item_qty,
                    decrement_button,
                    increment_button,
                    submit_button
                );
            }
        });

        // add a click event listener to the increment button
        increment_button.addEventListener("click", () => {
            // get the current value of the input field
            let value = parseInt(item_qty.value);
            // increment the value by 1
            value++;
            // check if the value is at the maximum value
            if (value >= max) {
                // if so, disable the increment button
                handleQuantityChange(
                    div,
                    max,
                    item_qty,
                    decrement_button,
                    increment_button,
                    submit_button
                );
            } else {
                // if not, enable the increment button
                handleQuantityChange(
                    div,
                    value,
                    item_qty,
                    decrement_button,
                    increment_button,
                    submit_button
                );
            }
        });

        // add a change event listener to the input field
        item_qty.addEventListener("change", () => {
            // get the current value of the input field
            let value = parseInt(item_qty.value);
            // check if the value is at the minimum value
            if (value <= min) {
                // if so, disable the decrement button
                handleQuantityChange(
                    div,
                    min,
                    item_qty,
                    decrement_button,
                    increment_button,
                    submit_button
                );
            } else if (value >= max) {
                // if so, disable the increment button
                handleQuantityChange(
                    div,
                    max,
                    item_qty,
                    decrement_button,
                    increment_button,
                    submit_button
                );
            } else {
                // if not, enable both buttons
                handleQuantityChange(
                    div,
                    value,
                    item_qty,
                    decrement_button,
                    increment_button,
                    submit_button
                );
            }
        });
    });
});