(function (w, d) {
    var styles = `
    <style>
    .melonhelp-add-ticket{
        background-color: #002826;
        border: 1px solid #052826;
        border-radius: 15px;
        font-size: 1rem;
        padding: 8px;
        color: #fff;
        margin: 5px ;
    }
    .mh-modal{
        background: #fff!important;
        overflow: hidden!important;
        bottom: 96px!important;
        z-index: 9999!important;
        transition: width .15s ease-in-out!important;
        border-radius: 12px!important;
        box-shadow: 0 6px 6px 0 rgba(0,0,0,.02),0 8px 24px 0 rgba(0,0,0,.12)!important;
        display: none;
        width: 400px;
        position: fixed !important;
        right: 6px;
        height: 700px;

    }

    iframe{
        border: none;
        font-family: sans-serif;
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 500px;
        height: 100%;
        pointer-events: auto;
        outline: 0;
        // padding-top: 10px;
    }

    @keyframes mh-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .close_button{

        position: absolute;
        z-index:9999;
        top: 2%;
        left: 90%;
        display: block;
        width: 100px;
        background:transparent;
        border:none;

    }
    .close_button:hover{
        opacity:0.8;
        cursor:pointer;

    }
    ::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    .mh-footer{
        position: absolute;
        bottom: 0px;
        z-index: 10;
        width: 100%;
        text-align: center;
        font-size: .7rem;
        font-family: sans-serif;
        text-decoration: none;
        color: #002826;
        margin-10px;
    }
    .mh-footer a{
        text-decoration: none;
        color: #002826;
    }
    .mh-circle{
        border-radius: 50%;
        background-color: #002826;
        color: #fff;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        right: 10px;
        bottom: 10px;
        z-index: 9999;
        cursor: pointer;
    }
    .mh-circle:hover{
        background-color: #052826;
        color: #fff;
    }
    </style>
    `;

    var langdefault = "en";
    var lang = {
        en: {
            create: "New support ticket",
            subject: "Subject",
            desciption: "Description",
            name: "Name",
            email: "Email",
            category: "Category",
            code: "Your ticket code is:",
            cancel: "Cancel",
            submit: "Create",
            see_ticket: "See ticket",
            see_tickets: "See tickets",
        },
        es: {
            create: "Nuevo ticket de soporte",
            subject: "Asunto",
            desciption: "Descripción",
            name: "Nombre",
            email: "Email",
            category: "Categoría",
            code: "Su código de ticket es:",
            cancel: "Cancelar",
            submit: "Crear",
            see_ticket: "Ver ticket",
            see_tickets: "Ver tickets",
        },
    };

    var widget = document.querySelector("script[data-token][data-id]");
    var token = widget.getAttribute("data-token");
    var wId = widget.getAttribute("data-id");
    var category = widget.getAttribute("data-category");
    var user = widget.getAttribute("data-user")
        ? widget.getAttribute("data-user")
        : "";

    window.data_widget = [];
    if (widget.getAttribute("data-lang")) {
        langdefault = widget.getAttribute("data-lang");
    }
    let apiUrl = 'https://api.melonhelp.com'
    // let apiUrl = "http://melonhelpapi.test";
    let server = apiUrl + "/api/widget/";
    window.soundpop = new Audio(apiUrl + "/widget/sound.wav");
    window.soundpop.volume = 0.2;
    //newTicket

    var form_ = d.createElement("iframe");
    fetch(
        server +
            "getData/" +
            token +
            `?user=${user}&lang=${langdefault}&category=${category}&api=${apiUrl}`
    )
        .then((response) => response.text())
        .then((data) => {
            form_.name = "iframe";
            form_.id = "iframe_melon";
            form_.src = "#";
            form_.onload = function () {
                form_.contentWindow.document.write(data);
                form_.contentWindow.document.close();
            };
            var el = d.createElement("div");
            el.id = "melonhelp-form";
            el.className = "mh-modal";
            d.body.append(el);
            opened = false;
            el.innerHTML = styles;
            // let close_button = d.createElement('div')
            // close_button.className = "close_button"
            // close_button.innerHTML = '<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTUxMiAwQzIyOS4yMzIgMCAwIDIyOS4yMzIgMCA1MTJjMCAyODIuNzg0IDIyOS4yMzIgNTEyIDUxMiA1MTJjMjgyLjc4NCAwIDUxMi0yMjkuMjE2IDUxMi01MTJDMTAyNCAyMjkuMjMyIDc5NC43ODQgMCA1MTIgMG0wIDk2MS4wMDhjLTI0Ny4wMjQgMC00NDgtMjAxLjk4NC00NDgtNDQ5LjAxYzAtMjQ3LjAyNCAyMDAuOTc2LTQ0OCA0NDgtNDQ4czQ0OCAyMDAuOTc3IDQ0OCA0NDhzLTIwMC45NzYgNDQ5LjAxLTQ0OCA0NDkuMDFtMTgxLjAwOC02MzAuMDE2Yy0xMi40OTYtMTIuNDk2LTMyLjc1Mi0xMi40OTYtNDUuMjQ4IDBMNTEyIDQ2Ni43NTJsLTEzNS43Ni0xMzUuNzZjLTEyLjQ5Ni0xMi40OTYtMzIuNzUyLTEyLjQ5Ni00NS4yNjQgMGMtMTIuNDk2IDEyLjQ5Ni0xMi40OTYgMzIuNzUyIDAgNDUuMjQ4TDQ2Ni43MzYgNTEybC0xMzUuNzYgMTM1Ljc2Yy0xMi40OTYgMTIuNDgtMTIuNDk2IDMyLjc2OSAwIDQ1LjI0OWMxMi40OTYgMTIuNDk2IDMyLjc1MiAxMi40OTYgNDUuMjY0IDBMNTEyIDU1Ny4yNDlsMTM1Ljc2IDEzNS43NmMxMi40OTYgMTIuNDk2IDMyLjc1MiAxMi40OTYgNDUuMjQ4IDBjMTIuNDk2LTEyLjQ4IDEyLjQ5Ni0zMi43NjkgMC00NS4yNDlMNTU3LjI0OCA1MTJsMTM1Ljc2LTEzNS43NmMxMi41MTItMTIuNTEyIDEyLjUxMi0zMi43NjggMC00NS4yNDgiLz48L3N2Zz4=" alt="close" width="30px">'
            // close_button.onclick = function () {
            //     document.getElementById('melonhelp-form').style.display = 'none';
            //     opened = false
            // }
            let footer = d.createElement("div");
            footer.className = "mh-footer mb-1";
            footer.innerHTML =
                '<a href="https://melonhelp.com"  target="_blank">Powered by Melon<b>Help</b></a>';
            el.appendChild(footer);
            // el.appendChild(close_button)
            el.appendChild(form_);
            if (wId) {
                const widget_button = document.getElementById(wId);
                const text = widget_button.innerHTML;
                document.getElementById(wId).onclick = function () {
                    if (!opened) {
                        window.soundpop.play();
                        document.getElementById(
                            "melonhelp-form"
                        ).style.display = "block";
                        opened = true;
                        widget_button.classList.add("mh-circle");
                        widget_button.innerHTML = "X";
                    } else {
                        document.getElementById(
                            "melonhelp-form"
                        ).style.display = "none";
                        opened = false;
                        widget_button.classList.remove("mh-circle");
                        widget_button.innerHTML = text;
                    }
                };
            }
        });
})(window, document);