(function () {

    // ---- Configuration ----
    const mixMatchId = 'veesualCta';
    const switchModelId = 'veesualSmCta';
    const secondarySwitchModelId = switchModelId + "_secondary";

    // ---- Inject script ----
    function injectCtaScript() {
        const script = document.createElement('script');
        script.async = 1;
        script.src = 'https://app.veesual.ai/vtryonxp/cta.min.js' + '?t=' + new Date().valueOf();
        const firstScript = document.getElementsByTagName('script')[0];
        firstScript.parentNode.insertBefore(script, firstScript);
    }

    // ---- Inject Style ----
    function injectStyle() {
        // ---- Check if it's already existing ----
        if (document.getElementById(`${mixMatchId}_style`)) {
            return;
        }

        // ---- Creating the style element ----
        const style = document.createElement('style');
        style.id = `${mixMatchId}_style`
        style.innerHTML = `#${mixMatchId} {
            width: 50%;
            margin-bottom: 8px;
        }
        .veesualButton {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 44px;
            border: 1px solid #053e64;
            border-radius: 100px;
            font-weight: 600;
            font-size: 12px;
            padding: 0 16px;
            text-align: center;
        }
        #${switchModelId} {
            right: 24px;
            display: block;
            position: absolute;
            top: 16px;
            z-index: 1;
        }
        .veesualSmButton::before {
            content: "More Models"; 
        }

        .veesualSmButton {
            display: flex;
            background-color: #c5e8f0;
            height: 40px;
            justify-content: center;
            align-items: center;
            padding: 0 16px;
            border-radius: 50px;
            font-size: 10px;
            font-weight: 600;
        }

        #${secondarySwitchModelId} {
            margin-right: auto;
            margin-left: auto;
        }
        .veesualSecondarySmButton {
            background-color: #c5e8f0;
            border-radius: 50px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0px 25px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
        }
        @media (min-width: 768px) {
            #${switchModelId} {
                top: 16px;
                right: 46px;
            }

            .veesualSmButton::before {
               content: "View On More Models";
            }
        }`;

        // ---- Injecting it in the head ----
        document.head.append(style);
    }


    // ---- Inject the mix n match CTA ----
    function injectMixnMatchCta() {
        if (!mixMatchId || document.getElementById(mixMatchId)) {
            return;
        }

        const elements = document.getElementsByClassName('product-type-main');
        if (elements.length != 1) {
            return;
        }
        const element = elements[0];

        const ctaInnerHtml = `
            <a class="veesualButton" style="" href="/pages/virtual-try-on" target="_self">
                <div style="width: 25px; height: 100%; margin-right: 8px;">
                <svg viewBox="0 10 100 63" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" style="clip-rule:evenodd;fill-rule:evenodd;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision" id="svg74">
                    <defs id="defs78"/>
                    <g id="g72" transform="matrix(0.0262618,0,0,0.0262618,-10.288195,-20.882815)">
                        <path style="opacity:0.994" fill="#053d64" d="m 2203.5,795.5 c 161.34,-5.218 294.18,53.116 398.5,175 93.25,119.69 125.25,254.36 96,404 -33.33,138.27 -111.16,243.1 -233.5,314.5 -56.81,31.21 -117.48,50.37 -182,57.5 0,115.33 0,230.67 0,346 557.4,163.52 1114.74,327.36 1672,491.5 95.96,31.31 167.46,91.47 214.5,180.5 29.07,60.26 37.41,123.26 25,189 -19.26,73.57 -61.09,130.41 -125.5,170.5 -44.64,26.77 -92.98,42.1 -145,46 -1088.68,1 -2177.35,0.66 -3266,-1 -84.418,-9.45 -153.918,-46.28 -208.5,-110.5 -51.74,-68.34 -68.407,-144.67 -50,-229 19.997,-82.88 64.497,-149.04 133.5,-198.5 32.544,-22.94 67.878,-40.61 106,-53 514.26,-165.14 1028.59,-329.98 1543,-494.5 -0.17,-130.67 0,-261.33 0.5,-392 3.99,-20.99 16.16,-34.83 36.5,-41.5 133.87,-0.85 240.7,-54.35 320.5,-160.5 69.3,-102.82 86.3,-213.82 51,-333 -39.33,-113 -114.5,-191.829 -225.5,-236.5 -108.37,-38.395 -213.37,-30.729 -315,23 -31.55,18.124 -60.22,40.124 -86,66 -13.95,11.07 -29.61,14.4 -47,10 -23.29,-7.72 -35.62,-23.891 -37,-48.5 0.36,-10.126 3.2,-19.459 8.5,-28 70.17,-73.687 155.67,-120.187 256.5,-139.5 19.71,-3.354 39.38,-5.854 59,-7.5 z m 10,1383 c 6.78,0.86 13.45,2.36 20,4.5 557.61,164.2 1115.27,328.2 1673,492 60.76,16.11 110.6,48.61 149.5,97.5 27.51,37.36 42.01,79.36 43.5,126 -2.22,47.94 -21.22,87.78 -57,119.5 -39.57,32.86 -85.24,50.2 -137,52 -1073,0.67 -2146,0.67 -3219,0 -59.52,-2.19 -110.02,-24.36 -151.5,-66.5 -38.362,-44.79 -50.696,-96.12 -37,-154 14.973,-58.28 47.139,-104.45 96.5,-138.5 28.008,-18.79 58.341,-32.79 91,-42 509.54,-163.24 1018.87,-326.74 1528,-490.5 z" id="path70"/>
                    </g>
                </svg>
                </div>
                <div>Virtual <span style="white-space: nowrap;">Try-On</span></div>
            </a>
        `;

        const cta = document.createElement('div');
        cta.id = mixMatchId;
        cta.style.cssText = 'display: none;';
        cta.innerHTML = ctaInnerHtml;
        element.before(cta);

        // ---- Remove stylitics ----
        const styliticsElem = document.getElementById("stylitics-jumplink");
        if (styliticsElem) {
            styliticsElem.remove();
        }
    }

    // ---- Inject the switch model CTA ----
    function injectSwitchModelCta() {
        if (!switchModelId || document.getElementById(switchModelId)) {
            return;
        }

        const elements = document.getElementsByClassName('product-img-box-grid');
        if (elements.length != 1) {
            return;
        }
        const element = elements[0];

        const ctaInnerHtml = `
                <a href="#" target="_self" class="veesualSmButton">
                </a>
            `;

        const cta = document.createElement('div');
        cta.id = switchModelId;
        cta.style.cssText = 'display: none;';
        cta.innerHTML = ctaInnerHtml;
        element.appendChild(cta);
    }

    // ---- Inject the secondary switch model CTA ----
    function injectSecondarySwitchModelCta() {
        if (!secondarySwitchModelId || document.getElementById(secondarySwitchModelId)) {
            return;
        }

        const elements = document.getElementsByClassName('model-select__group');
        if (elements.length != 1) {
            return;
        }
        const element = elements[0];

        element.style = "flex-direction: column;";

        const buttonTexts = [
            `View On More Models`,
        ];

        const ctaInnerHtml = `
                    <a href="#" target="_self" class="veesualSecondarySmButton">
                        ${buttonTexts[0]}
                    </a>
                `;

        const cta = document.createElement('div');
        cta.id = secondarySwitchModelId;
        cta.style.cssText = 'display: none;';
        cta.innerHTML = ctaInnerHtml;
        element.prepend(cta);
    }

    // ---- Run async CTA ----
    function runAsyncCta() {
        // ---- Make sure it exists ----
        window['_veesual_custom_cta_async'] = window['_veesual_custom_cta_async'] || [];
        window['_veesual_cta_async'] = window['_veesual_cta_async'] || [];

        // ---- Duplicate payload ----
        const getFinalPayloads = function (payload) {
            const payloads = [];

            // ---- Run mix n match ----
            if (mixMatchId) {
                const mixMatchPayload = JSON.parse(JSON.stringify(payload));
                mixMatchPayload[1] = mixMatchId;
                payloads.push(mixMatchPayload);
            }

            // ---- Run switch model ----
            if (switchModelId) {
                const switchModelPayload = JSON.parse(JSON.stringify(payload));
                switchModelPayload[1] = switchModelId;
                switchModelPayload[5]['module'] = 'switch_model';
                switchModelPayload[5]['cta_location'] = 'pdp_image';
                switchModelPayload[5]['ignore_missing'] = true;
                switchModelPayload[5]['callback'] = function (data) {
                    // ---- Hide conflict element ----
                    const style = document.createElement('style');
                    style.id = `${mixMatchId}_style`
                    style.innerHTML = `._okkular_similar_view_button {
                        display: none !important;
                    }`;

                    document.head.append(style);
                };
                payloads.push(switchModelPayload);
            }

            // ---- Run secondary switch model ----
            if (secondarySwitchModelId) {
                const switchModelPayload = JSON.parse(JSON.stringify(payload));
                switchModelPayload[1] = secondarySwitchModelId;
                switchModelPayload[5]['module'] = 'switch_model';
                switchModelPayload[5]['cta_location'] = 'pdp_dropdown';
                switchModelPayload[5]['ignore_missing'] = true;
                payloads.push(switchModelPayload);
            }

            return payloads;
        };

        // ---- Replace array ----
        const customCtaAsync = {
            push: function () {
                for (let i = 0; i < arguments.length; i++) {
                    for (const payload of getFinalPayloads(arguments[i])) {
                        window['_veesual_cta_async'].push(payload);
                    }
                }
            },
            isLoaded: true,
        };

        // ---- Escape if already loaded ----
        if (window['_veesual_custom_cta_async'] && window['_veesual_custom_cta_async']['isLoaded']) {
            return;
        }

        // ---- Swap et initialisation ----
        const swap = window['_veesual_custom_cta_async'];
        window['_veesual_custom_cta_async'] = customCtaAsync;
        swap.map(function (payload) {
            customCtaAsync.push(payload);
        });
    }

    // ---- Execution ----
    injectCtaScript();
    injectStyle();
    injectMixnMatchCta();
    injectSwitchModelCta();
    injectSecondarySwitchModelCta();
    runAsyncCta();
})();