function loadJQuery(callback) {
    if (typeof window.jQuery === "undefined") {
        var script = document.createElement("script");
        script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";
        script.integrity = "sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT";
        script.crossOrigin = "anonymous";
        script.onload = function () {
            window.$ = window.jQuery.noConflict();
            callback();
        };
        script.onerror = function () {
            console.error("Failed to load jQuery");
        };
        document.head.appendChild(script);
    } else {
        callback();
    }
}

function handleSetupCustomEvent() {
    var ot_LinkInApp = '/admin/apps/'+ot_feature_settings.app_name
    var app_root_url = ot_feature_settings?.app_root_url|| 'https://apps.omegatheme.com/shopify/facebook-multi-pixels';
    var ot_menu_icon = `${app_root_url}/images/custom-event/menuIcon-black.png`;
    var ot_qa_icon = `${app_root_url}/images/custom-event/qaIcon-black.png`;
    var ot_share_black_icon = `${app_root_url}/images/custom-event/shareIcon-black.png`;
    var ot_share_white_icon = `${app_root_url}/images/custom-event/shareIcon-white.png`;
    var ot_tick_icon = `${app_root_url}/images/custom-event/tickIcon-blue.png`;

    let ot_css_customEvent = `<style>
    .text-tutorial{
        vertical-align: middle;
        color: #6D7175;
        opacity: 1
    }
    .text-tutorial:hover{
        opacity: 0.6
    }
    #tutorial:hover{
        opacity: 0.6
    }
    .ot-title-card{
        background: #e6e5e5;
        padding: 10px 10px
    }
    #ot_close_button{
        background: #e6e5e5;
        border-radius: 24px; width: 126px;
        height: 28px; border: unset; color: #fff;
        position: absolute;
        right: 25px; font-size: 14px; font-weight: 550; cursor: pointer;
        pointer-events:none;
        color: #727272
    }
    #ot_track_button{
    width: 170px;
    margin-top: 10px;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #6D7175;
    box-sizing: border-box;
    border-radius: 4px;
    font-weight: 600;
    font-weight: 550;
    font-size: 14px;
    line-height: 5px;
    cursor: pointer;
    }
    #ot_track_button:hover{
    opacity:0.6
    }
    #ot_close_button:hover{
    opacity:0.6
    }
    .otfooterQA{
    font-size: 13px; font-weight: 500; margin-top: 15px;
        justify-content: end;
        display: flex; cursor: pointer
    }
    #ot_fb_modal{
    position: fixed;
    z-index: 1000;
    left: 10px;
    top: 10px;
    width: 450px;
    height: auto;
    overflow: auto;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    }
    #ot_fb_modal_notification{
    position: fixed;
    z-index: 1000;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 10px;
    width: 650px;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 20px;
    text-align:center
    }
    #ot_fb_backDrop{
    position: fixed;
    z-index : -1;
    display : block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
    animation: Polaris-Backdrop__fade--in .2s 1 forwards;
    opacity: 1;
    }
    #otIconShare {
    width: 10px;
    height: 13px;
    margin-right: 5px;
    display: inline-block;
    }

    .notification-title{
    color:#1877F2
    }

    .ot-close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 32px;
    height: 32px;
    opacity: 0.3;
    font-size: 1px;
    }
    .ot-close:hover {
    opacity: 1;
    }
    .ot-close:before, .ot-close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 24px;
    width: 2px;
    background-color: #333;
    }
    .ot-close:before {
    transform: rotate(45deg);
    }
    .ot-close:after {
    transform: rotate(-45deg);
    }
    </style> `;

    // =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    // |  END Declare variable
    // =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

    // =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    // |  Declare Dom
    // =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
    $("body").append(ot_css_customEvent);
    $("body").append(`<div class="event_content"
    ></div>
    <div id="ot_fb_modal_notification">
    <a class="ot-close" id="ot-close">.</a>
    <p class = "notification-title"><b>Click the middle of the highlighted button to set up your event</b></p>
    <p class = "notification-title">(scroll down to see buttons)</p>
    </div>`);

    $(".event_content").append(`
    <div class="backdrop" id ="ot_fb_backDrop"></div>
    <div title="Basic dialog" id="ot_fb_modal">
        <div class = "ot-title-card">
            <img src = "${ot_menu_icon}" style="width: 10px;
                height: 13px;
                margin-right: 5px;">
            </img>
            <b style="font-size:15px;line-height: 15px;">Custom Event Setup</b>
            <button id="ot_close_button"><img id="otIconShare" src="${ot_share_black_icon}">Finish Setup</button>
        </div>
        <div style="padding: 0 20px 20px">
        <div style="margin-top: 15px; font-size: 15px;">
            <b>Tracking button</b>
        </div>
        <div id="event_button_field" style="margin-top: 10px">
            <p id="ot_no_button_text" style="color : #828282; font-size: 15px;">No button chosen</p>
        </div>
        <div>
        <button id="ot_track_button">+ Track New Button</button>
    </div>
        <div class = "otfooterQA"><a id="tutorial" href = "https://omegatheme-contact.gitbook.io/omega-multi-facebook-pixels/integration/custom-events" target="_blank"><img src="${ot_qa_icon}" style="width: 13px;
        margin-right: 2px;display: inline-block;vertical-align: middle
        "><span class = "text-tutorial">Tutorial</span></a></div>
        </div>

    `);

    // =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    // |  End Declare Dom
    // =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
    let domeLoading = document.querySelector('#ot-fb__backdrop-loading-custom-event');
    if(domeLoading){
            domeLoading.style.display = 'none';
        console.log('Hide loading event builder!')
    }
    const ot_fb_modal = document.getElementById("ot_fb_modal");
    const ot_close_notification = document.getElementById("ot-close");
    const ot_fb_modal_notification = document.getElementById(
    "ot_fb_modal_notification"
    );
    const otIconShare = document.getElementById("otIconShare");
    const ot_close_button = document.getElementById("ot_close_button");
    const ot_fb_backDrop = document.getElementById("ot_fb_backDrop");
    const ot_track_button = document.getElementById("ot_track_button");
    const ot_list_event = document.querySelectorAll(
    "a:not(#tutorial):not(#ot-close), button:not(#ot_track_button):not(#ot_close_button)"
    );
    const ot_no_button_text = document.getElementById("ot_no_button_text");

    const ot_initButtonFires = JSON.stringify({});

    let button_fires = ot_initButtonFires;

    otFbPixel_dragElement(ot_fb_modal);
    ot_close_button.onclick = async () => {
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const nameEvent = urlParams.get('cta')
    const typeEvent = urlParams.get('custom')
    // const url = await otFbPixel_getUrlRedirect();
    const url = ot_endPointUrl;
    ot_fb_backDrop.style.display = "none";
    ot_fb_modal.style.display = "none";
    button_fires = encodeURIComponent(button_fires);
    otFbPixel_resetHighlight(ot_list_event);
    window.open(
        `https://${Shopify.shop}${ot_LinkInApp}?redirect-action=custom-events&otStoreLanguage=en&cta=${nameEvent}&custom=${typeEvent}&button_fires=${button_fires}`,
        "_self"
    );
    };
    ot_close_notification.onclick = () => {
    ot_fb_modal_notification.style.display = "none";
    };
    ot_track_button.onclick = () => {
    $("#ot_no_button_text")
        .replaceWith(`<p id="ot_no_button_text" style="color : #828282; font-size: 15px;
    ">No button chosen</p>`);
    //reset button complete

    ot_close_button.style.backgroundColor = "#e6e5e5";
    ot_close_button.style.boxShadow = "none";
    ot_close_button.style.pointerEvents = "none";
    ot_close_button.style.color = "#727272";
    otIconShare.setAttribute("src", ot_share_black_icon);
    //stop event app Quote
    if (typeof OMGRFQConfigs !== "undefined") {
        OMGRFQConfigs["stopPropagation"] = true;
    }
    //end event app Quote

    ot_list_event.forEach((item) => {
        $(item).unbind("click");
        item.style.border = "2px #1877F2 solid";
        item.style.cursor = "pointer";
        item.style.boxShadow = "0px 0px 6px #1877F2";
        item.style.opacity = 1;
        item.style.backgroundImage = "unset";
        item.style.backgroundRepeat = "unset";
        item.style.backgroundPosition = "unset";
        ot_fb_backDrop.style.zIndex = -1;
        ot_fb_backDrop.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
        ot_fb_backDrop.style.position = "fixed";
        ot_fb_backDrop.style.display = "block";
        item.style.zIndex = 400;
        button_fires = ot_initButtonFires;
        $(item).off("click");

        var elemEventHandler = function (e) {
        e.stopPropagation();
        e.preventDefault();
       
        ot_close_button.style.backgroundColor = "#1877F2";
        ot_close_button.style.boxShadow = "0px 8px 15px rgba(0, 0, 0, 0.1)";
        ot_close_button.style.pointerEvents = "auto";
        ot_close_button.style.color = "white";
        otIconShare.setAttribute("src", ot_share_white_icon);

        item.style.pointerEvents = "unset";
        item.style.border = "2px red solid";
        item.style.backgroundImage = `url(${ot_tick_icon})`;
        item.style.backgroundRepeat = "no-repeat";
        item.style.backgroundPosition = "top right";
        item.style.backgroundSize = "1em";

        ot_fb_backDrop.style.zIndex = 600;
        ot_fb_backDrop.style.backgroundColor = "rgba(0, 0, 0, 0)";
        ot_fb_backDrop.style.position = "fixed";
        ot_fb_backDrop.style.top = 0;
        ot_fb_backDrop.style.right = 0;
        ot_fb_backDrop.style.bottom = 0;
        ot_fb_backDrop.style.left = 0;
        ot_fb_backDrop.style.display = "block";

        item.classList.add("event_selected");
        listEventTemp = document.querySelectorAll(
            `a:not(.tutorial):not(.event_selected), button:not(#ot_track_button):not(#ot_close_button):not(.event_selected)`
        );
        otFbPixel_resetHighlight(listEventTemp);
        item.classList.remove("event_selected");
        const name = item.textContent?.trim().length
            ? item.textContent?.trim().replace(/\s+/g, "_")
            : item.getAttribute("aria-label")?.trim().replace(/ /g, "");
        const content = e.target.textContent?.trim().length
            ? e.target.textContent?.trim().replace(/\s+/g, " ")
            : "";
        const className = e.target.classList.value.trim().length
            ? "." + e.target.classList.value.trim().replace(/\s+/g, ".")
            : "";
        const id = e.target.id.trim().length ? "#" + e.target.id.trim() : "";
        const class_id = className + id;
        button_fires = JSON.stringify({
            button_fires_by_text: content,
            button_fires_by_class_id: class_id,
            button_fires_label: name,
        });
        console.log("button_fires", JSON.parse(button_fires));

        $("#ot_no_button_text")
            .replaceWith(`<p id="ot_no_button_text"><img src="${ot_tick_icon}" style="
        height: 17px;
        margin-right: 5px;     display: inline-block;     vertical-align: middle;
        "><span style="vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        width: 350px;
        white-space: nowrap;
    ">${name}</span></p>`);
        return false;
        };
        $(item).on("click", elemEventHandler);
    });
    };

    const otFbPixel_resetHighlight = (ot_list_event) => {
    ot_list_event.forEach((item) => {
        item.style.border = "unset";
        item.style.boxShadow = "unset";
        item.style.cursor = "unset";
        item.style.opacity = "unset";
        item.style.backgroundImage = "unset";
        item.style.backgroundRepeat = "unset";
        item.style.backgroundPosition = "unset";
    });
    };

    const otFbPixel_getUrlRedirect = async () => {
    let url = "";
    await fetch(
        `${ot_endPointUrl}/client/facebook-pixel.php?shop=${Shopify.shop}&action=getUrlRedirect`
    )
        .then((response) => response.json())
        .then((data) => (url = data.data.url))
        .catch((error) => console.log(error));
    return url;
    };

    function otFbPixel_dragElement(elmnt) {
    var pos1 = 0,
        pos2 = 0,
        pos3 = 0,
        pos4 = 0;
    if (document.getElementById(elmnt.id)) {
        /* if present, the header is where you move the DIV from:*/
        document.getElementById(elmnt.id).onmousedown = dragMouseDown;
    } else {
        /* otherwise, move the DIV from anywhere inside the DIV:*/
        elmnt.onmousedown = dragMouseDown;
    }

    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = elmnt.offsetTop - pos2 + "px";
        elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
    }

    function closeDragElement() {
        /* stop moving when mouse button is released:*/
        document.onmouseup = null;
        document.onmousemove = null;
        /* end moving when mouse button is released:*/
    }
    }
}

function includeSetUpEventPage() {
    var conditionIncludeFileEventSetup = sessionStorage.getItem("OT_FACEBOOK_EVENT_SETUP");
    var isCustomEventPage = ot_getUrlParam("otCustomEvent");
    if (conditionIncludeFileEventSetup == "show" || isCustomEventPage == "1") {
        sessionStorage.setItem("OT_FACEBOOK_EVENT_SETUP", "show");
        handleSetupCustomEvent()
    }
}

loadJQuery(includeSetUpEventPage);