// the window.location.hostname check will prevent integration from loading on the kwipped approve hosted page

// DEBUG MODE -- Set to true if you want console logs to show.
var approve_debug_mode = true;
approve_debug_log("APPROVE SCRIPT LOADED");
// ******************************************************************
// ******************************************************************
//                          PRODUCT PAGE
// ******************************************************************
// ******************************************************************


// In the easiest implementation, you will be able to set every variable you need right here.
// GENERAL PRODUCT WRAPPER -- element to look for to know we are on a product page
var approve_product_wrapper_ele = '.product-details.ProductItem-details';

var approve_product_wrapper = document.querySelector(approve_product_wrapper_ele);

// Must ensure we are on a product page before attempting to select the remaining elements.
if (approve_product_wrapper){
    
    // ******************************************************************
    //              PRODUCT PAGE Variable Configuration
    // ******************************************************************
    // PRODUCT INFO ELEMENTS -- These strings will be used in document.querySelector(). Ensure that there is only one of each on the page.
    var approve_model_ele_name = 'h1.ProductItem-details-title';
    var approve_price_ele_name = ' .product-price';
    var second = false;
    if (document.querySelector(approve_price_ele_name).children.length != 0) {
        approve_price_ele_name = ' .product-price span';
        second = true;
    }

    // ELEMENT TO INSERT THE BUTTON BELOW -- This strings will be used in document.querySelector(). Ensure that there is only one on the page.
    var approve_insert_after_ele_name = ' .sqs-add-to-cart-button-wrapper';

    var approve_qty_ele_name = ' .product-quantity-input input';
    // QTY INCREASE / DECREASE BUTTONS -- These buttons do not always trigger a change event on the QTY element. We will add click watchers on these elements. [Optional]
    var approve_inc_quantity_ele = '';
    var approve_dec_quantity_ele = '';

    // SKU
    var approve_sku_ele_name = '';

    // OPTIONS -- All of the following is optional. Options are be fairly custom
        // Wrapper for the ENTIRE options section
    var approve_options_wrapper_ele_name = '';
        // Elements that need to have *change* watchers. Mostly used on select elements. Will be used in a foreach, so picking a class with multiple selects is both allowed and encouraged. Ensure these elements are contained within the wrapper above.
    var approve_select_ele_name = '';

    // APPROVE BUTTON STYLING
    var approve_button_display_style = 'inline-block';

    // '50px' -- All sides will have margin of 50PX
    // '50px 10px' -- top/bottom will be 50px, right/left 10px
    // '50px 10px 20px 30px' -- top / right / bottom / left
    var approve_button_display_margin = '10px 0px 0px 0px';

    var approve_button_to_remove_ele = "";

    // ******************************************************************
    //              END PRODUCT PAGE Variable Configuration
    // ******************************************************************




    // ******************************************************************
    //   INITIAL PRODUCT PAGE ELEMENT SELECTION -- No Action Required
    // ******************************************************************

    // Grabbing variables based on the variable configuration.
        // IMPORTANT -- this selection has to be made both INSIDE and OUTSIDE of init_approve_button.
        // This is because we need to first identify the elements for the use of watchers -- but also need them to be dynamic.

    // model
    var approve_model_ele  = document.querySelector(approve_model_ele_name);
    if (!approve_model_ele){
        approve_debug_log("APPROVE: No initial approve_model_ele found.",1);
    }

    // price
    var approve_price_ele  = document.querySelector(approve_price_ele_name);
    if (!approve_price_ele){
        approve_debug_log("APPROVE: No initial approve_price_ele found.",1);
    }

    // qty
    if (approve_qty_ele_name){
        var approve_qty_ele  = document.querySelector(approve_qty_ele_name);
        if (!approve_qty_ele){
            approve_debug_log("APPROVE: No initial approve_qty_ele found.",1);
        }
    }

    if (approve_sku_ele_name){
        var approve_sku_ele  = document.querySelector(approve_sku_ele_name);
        if (!approve_sku_ele){
            approve_debug_log("APPROVE: No initial approve_sku_ele found.",1);
        }
    }
    // element to insert after
    var approve_insert_after_ele = document.querySelector(approve_insert_after_ele_name);
    if (!approve_insert_after_ele){
        approve_debug_log("APPROVE: No initial approve_insert_after_ele found.",1);
    }

    // ******************************************************************
    //           END INITIAL PRODUCT PAGE ELEMENT SELECTION
    // ******************************************************************



    // ******************************************************************
    //  Initilizes the approve button.
    //  This function handles both the CREATION and UPDATE of button variables
    // ******************************************************************
    function init_approve_button(){

        // ******************************************************************
        //   DYNAMIC PRODUCT PAGE ELEMENT SELECTION -- No Action Required
        // ******************************************************************

        // Grabbing variables based on the variable configuration.
        // IMPORTANT -- this selection has to be made both INSIDE and OUTSIDE of init_approve_button.
        // This is because we need to first identify the elements for the use of watchers -- but also need them to be dynamic.

        // model
        var approve_model_ele  = document.querySelector(approve_model_ele_name);
        if (!approve_model_ele){
            approve_debug_log("APPROVE: No dynamic approve_model_ele found.",0,1);
            return;
        }
        var approve_sku_ele = null;
        if (approve_sku_ele_name){
            approve_sku_ele  = document.querySelector(approve_sku_ele_name);
            if (!approve_sku_ele){
                approve_debug_log("APPROVE: No dynamic approve_sku_ele found.",1);
            }
        }
        var approve_model = approve_model_ele.textContent;
        
        if (approve_sku_ele) {
            approve_model += " (SKU: " + approve_sku_ele.textContent + ") ";
        }

        // price
        var approve_price_ele  = document.querySelector(approve_price_ele_name);
        if (!approve_price_ele){
            approve_debug_log("APPROVE: No dynamic approve_price_ele found.",0,1);
            return;
        }
        var approve_price = 0;
        // console.log(approve_price_ele.nextSibling);
        // TRH MODIFIED - added the if check in the function initialization as the content was changing after the script was loaded (on a select list change) and not being seen/processed in the button code
        if (document.querySelector(approve_price_ele_name).children.length != 0) {
            approve_price_ele_name = ' .product-price span';
            second = true;
        }
        if (!second) { 
            approve_price = approve_price_ele.innerHTML.replace(/[^0-9.]/g, '');
            approve_price = parseFloat(approve_price);
            // console.log("NO SECOND APPRICE", approve_price);
        } else {
            approve_price = approve_price_ele.nextSibling;
            // console.log("APPRICE", approve_price.textContent.replace(/[^0-9.]/g, ''));
            var approve_price_sub = approve_price.textContent.replace(/[^0-9.]/g, '');
            // TRH MODIFIED - in some situations they are setting the price container as follows:
            /*
                <div class="product-price">
                    <span class="visually-hidden v6-visually-hidden">Sale Price: </span>$5,400.00 
                    <span class="visually-hidden v6-visually-hidden">Original Price: </span>
                    <span class="original-price">$5,900.00</span>
                </div>
            
            */
            // that obviously doesnt work with the initial design so used the below code to clone the element and remove all spans thereby leaving only the text content of the parent element i.e. the price. 
            if (!approve_price_sub) {
                var approve_price_content = approve_price_ele.cloneNode(true);
                if (approve_price_content.querySelector("span")) {
                    var all_spans = approve_price_content.querySelectorAll("span");
                    for (var i= 0;i< all_spans.length;i++) {
                        all_spans[i].remove();
                    }
                    approve_price_sub = approve_price_content.textContent.replace(/[^0-9.]/g, '');
                }
            }
            // console.log("APPROVEPRICE SUB ",approve_price_sub);
            approve_price = parseFloat(approve_price_sub);
        }
        
        if (!approve_price || approve_price == 0){
            approve_debug_log("APPROVE: Price not found (or is 0) after removing non-numerical characters.",1);
        }


        // qty
        if (approve_qty_ele_name){
            var approve_qty_ele  = document.querySelector(approve_qty_ele_name);
        }
        var approve_qty = 1;
        if (!approve_qty_ele){
            approve_debug_log("APPROVE: No dynamic approve_qty_ele found.",1);
        } else {
            approve_qty = approve_qty_ele.value;
        }
        approve_qty = parseInt(approve_qty);


        // element to insert after
        var approve_insert_after_ele = document.querySelector(approve_insert_after_ele_name);
        if (!approve_insert_after_ele){
            approve_debug_log("APPROVE: No dynamic approve_insert_after_ele found.",0,1);
            return;
        }
        // ******************************************************************
        //           END DYNAMIC PRODUCT PAGE ELEMENT SELECTION
        // ******************************************************************


        // ******************************************************************
        //                   FIND SELECT OPTIONS
        // ******************************************************************
        var approve_options_wrapper_ele = null;
        if (approve_options_wrapper_ele_name){
            // Get options wrapper
            approve_options_wrapper_ele = document.querySelector(approve_options_wrapper_ele_name);
            if (!approve_options_wrapper_ele){
                approve_debug_log("No approve_options_wrapper_ele found.");
            } else { // TRH - added else to prevent js error when options dont exist
                var approve_selected_options = approve_options_wrapper_ele.querySelectorAll(approve_select_ele_name);
                if (!approve_selected_options){
                    approve_debug_log("No approve_selected_options found.");
                }
                approve_selected_options.forEach(function (item, index) {
                    // CONFIGURE OPTIONS HERE
                });
            }
        }
        // ******************************************************************
        //                      END SELECT OPTIONS
        // ******************************************************************


        // ******************************************************************
        //                   ADD APPROVE BUTTON TO PAGE
        // ******************************************************************
        // Check if the button is on the page
        var approve_button = document.getElementById('approve_button_id');
        if (!approve_button){

            // If event listener is needed for options, here is where it can be initiated.
            if (approve_options_wrapper_ele_name){
                approve_options_wrapper_ele = document.querySelector(approve_options_wrapper_ele_name);
                if (approve_options_wrapper_ele){
                    // If a change listener is needed for options, it is initliazed here.
                    var approve_options1 = approve_options_wrapper_ele.querySelectorAll(approve_select_ele_name);
                    approve_options1.forEach(function (item, index) {
                        item.addEventListener('change',event => {
                            init_approve_button();
                        })
                    });
                }
            }

            // Insert Button=
            var approve_button = document.createElement('approve-button');
            approve_button.id = "approve_button_id";

            if (approve_button_display_style){
                approve_button.style.display = approve_button_display_style;
            }
            if (approve_button_display_margin){
                approve_button.style.margin = approve_button_display_margin;
            }
            approve_button.setAttribute('application-type',"embedded_app");
            approve_button.style.scale = "0.92";
            var approve_btn_wrapper = document.createElement("div");
            approve_btn_wrapper.appendChild(approve_button);
            approve_insert_after_ele.after(approve_btn_wrapper);
        }

        // Removing a button
        if (approve_button_to_remove_ele){
            var approve_button_to_remove = document.querySelector(approve_button_to_remove_ele);
            if (approve_button_to_remove){
                approve_button_to_remove.style.display = "none";
            }
        }


        // If price is below $200, teaser rate breaks. Let's ensure that it's above $500.
        if ((parseFloat(approve_price) * parseInt(approve_qty)) < 500){
            approve_debug_log("Price is below $500.");
            approve_button.style.display = "none";
            return;
        }

        // Set approve button variables.
        approve_button.setAttribute('price',approve_price);
        approve_button.setAttribute('model',approve_model);
        approve_button.setAttribute('qty',approve_qty);
        approve_button.setAttribute('type',"new_product");

    }

    // ******************************************************************
    // Simple set button qty. Must pass the new QTY to the button.
    // ******************************************************************
    function approve_update_qty(approve_qty){
        var approve_button = document.getElementById('approve_button_id');
        if (approve_button){
            var approve_btn_qty = parseInt(approve_button.getAttribute('qty'));
            if (approve_qty != approve_btn_qty){
                approve_button.setAttribute('qty',approve_qty);
            }
        }
    }

    // ******************************************************************
    // If timing is an issue, this function creates an interval for setting button qty.
    // ******************************************************************
    var approve_timer = null;
    function approve_update_qty_timer(){
        var approve_button = document.getElementById('approve_button_id');
        if (approve_button){
            if(approve_timer) {
                clearInterval(approve_timer);
                approve_timer = null;
            }
            var approve_btn_qty = parseInt(approve_button.getAttribute('qty'));
            var number_of_checks = 0;
            approve_timer = setInterval(function(){
                if(number_of_checks>=5){
                    clearInterval(approve_timer);
                    approve_timer = null;
                }
                if(approve_btn_qty != parseInt(approve_qty_ele.value)){
                    approve_button.setAttribute('qty',parseInt(approve_qty_ele.value));
                    clearInterval(approve_timer);
                    approve_timer = null;
                }
                number_of_checks++;
            },500)
        }
    }

    init_approve_button();

    // If there is a qty element, we need to set watchers/listeners.
    if (approve_qty_ele){
        // Add change watcher to qty input
        approve_qty_ele.addEventListener('change',event => {
            approve_update_qty_timer();
        })

        if (approve_inc_quantity_ele && approve_dec_quantity_ele){
            activate_increase_and_decrease_buttons();
        }
    }

    if (approve_price_ele){
        var approve_price_watcher = approve_price_ele;
        // Add observer to price element
        const approve_price_observer = new MutationObserver(function() {
            init_approve_button();
        });
        approve_price_observer.observe(approve_price_watcher,{subtree: true, childList: true});

        var approve_model_watcher = approve_model_ele;
        if (approve_model_watcher){
            // Add observer to price element
            const approve_model_observer = new MutationObserver(function() {
                init_approve_button();
            });
            approve_model_observer.observe(approve_model_watcher,{subtree: false, childList: true});
        }
    }
}
else {
    approve_debug_log("APPROVE: approve_product_wrapper not found.",1)
}

/**
 *
 * Activates quantity buttons.
 * QTY buttons are, sometimes added to the page after a page has been rendered. This will wait for that to happen.
 */
function activate_increase_and_decrease_buttons(number_of_tries=0){
    number_of_tries++;
    // buttons that raise or lower the quantity.
    var approve_qty_btn_inc = document.querySelector(approve_inc_quantity_ele);
    var approve_qty_btn_dec = document.querySelector(approve_dec_quantity_ele);
    if ((!approve_qty_btn_inc || !approve_qty_btn_dec) && number_of_tries < 10){
    setTimeout(()=>(activate_increase_and_decrease_buttons(number_of_tries)),500);
        return
    }

    // Assign click events to these buttons so that qty is updated on click.
    if(approve_qty_btn_inc && approve_qty_btn_dec){
        approve_qty_btn_inc.addEventListener('click',event => {
            var approve_button = document.getElementById('approve_button_id');
            if (approve_button){
                var approve_btn_qty = parseInt(approve_button.getAttribute('qty'));
                approve_btn_qty = approve_btn_qty + 1;
                approve_update_qty(approve_btn_qty);
            }
        });

        approve_qty_btn_dec.addEventListener('click',event => {
            var approve_button = document.getElementById('approve_button_id');
            if (approve_button){
                var approve_btn_qty = parseInt(approve_button.getAttribute('qty'));
                if (approve_btn_qty > 1){
                    approve_btn_qty = approve_btn_qty - 1;
                    approve_update_qty(approve_btn_qty);
                }
            }
        });
    }
    else {
        approve_debug_log("APPROVE: No approve_qty_btn_inc or approve_qty_btn_dec found.",1);
    }
}

// ******************************************************************
// ******************************************************************
//                          END PRODUCT PAGE
// ******************************************************************
// ******************************************************************




// IF YOU WANT TO USE A LOG WITH COLORS YOU CAN USE
function approve_debug_log(log, warn, err) {
    warn = warn || false;
    err = err || false;
    let css = "padding: 5px 20px; ";
    if (err) {
        css += "background:#8B0000; color:#fff; ";
    } else if(warn) {
        css += "background:#FFBF00; color:#000; ";
    } else {
        css += "background:#418AC9; color:#fff; ";
    }
    if (approve_debug_mode) console.log("%c"+log,css);
}