const addTutorialPanel = () => {
    var e, t;
    e = chrome.runtime.getURL("feature/utilities/packages/html2pdf.bundle.min.js"), (t = document.createElement("script")).type = "application/javascript", t.src = e, document.head.appendChild(t);
    const n = document.getElementById("laxis-root");
    let l = document.getElementById("laxis-mainPanel");
    if (l) l.style.display = "block";
    else {
        l = document.createElement("div"), l.setAttribute("id", "laxis-mainPanel"), l.classList.add("panelBase"), l.style.width = "300px", l.style.backgroundColor = "#454953";
        const e = document.createElement("div");
        e.setAttribute("name", "laxis-rootHeader"), e.style.cursor = "move", e.style.width = "300px", e.style.height = "50px", e.style.backgroundColor = "#454953", e.style.borderRadius = "12px 12px 0 0", e.style.display = "flex", e.style.alignItems = "center", e.style.justifyContent = "space-between";
        const t = document.createElement("div");
        t.style.display = "flex", t.style.alignItems = "center", t.style.paddingLeft = "8px";
        const i = document.createElement("img");
        i.src = chrome.runtime.getURL("image/logo.png"), i.addEventListener("click", (function() {
            window.open(`${domainUrl}/login`)
        })), i.alt = "none", i.style.height = "30px", i.style.width = "90px", i.style.marginLeft = "-16px", i.style.cursor = "pointer", i.style.zIndex = "999", t.appendChild(i), e.appendChild(t);
        const o = document.createElement("div");
        o.style.display = "flex", o.style.alignItems = "center";
        const d = document.createElement("div");
        d.classList.add("imageContainer"), d.title = "Minimize", d.addEventListener("click", minimize);
        const a = createCollapseIcon();
        d.appendChild(a), o.appendChild(d), e.appendChild(o), l.appendChild(e);
        let s = document.createElement("div");
        s.style.padding = "24px", s.style.fontSize = "14px", s.style.color = "#ffffff", s.style.backgroundColor = "#292c35", s.style.borderRadius = "0 0 12px 12px";
        let c = document.createElement("div");
        c.innerHTML = "Highlight with colors", s.appendChild(c);
        let r = document.createElement("div");
        r.style.display = "flex", r.style.alignItems = "center", r.style.justifyContent = "center", bookmarkList.forEach((e => {
            let t = document.createElement("div");
            t.classList.add("tutorialContainer"), t.style.border = "1px solid #9e9e9e", t.style.backgroundColor = "#454953", t.style.display = "flex", t.style.alignItems = "center", t.style.justifyContent = "center";
            let n = createSVGIcon(e.attributes, e.content);
            t.appendChild(n), r.appendChild(t)
        })), s.appendChild(r);
        let p = document.createElement("div");
        p.style.textAlign = "center", p.innerHTML = "Use the three main color to hightlight any paragraph during the meeting.", s.appendChild(p);
        let m = document.createElement("div");
        m.innerHTML = "Select language", m.style.paddingTop = "32px", s.appendChild(m);
        let u = document.createElement("div");
        u.style.display = "flex", u.style.alignItems = "center", u.style.justifyContent = "center";
        const y = document.createElement("div");
        y.classList.add("tutorialContainer"), y.style.display = "flex", y.style.alignItems = "center", y.style.justifyContent = "center";
        const g = createCaptionOnIcon();
        y.appendChild(g), u.appendChild(y), s.appendChild(u);
        let h = document.createElement("div");
        h.style.textAlign = "center", h.innerHTML = "Laxis supports 69 languages in Google Meet", s.appendChild(h);
        let x = document.createElement("div");
        x.style.paddingTop = "32px", x.innerHTML = "Download", s.appendChild(x);
        let C = document.createElement("div");
        C.style.display = "flex", C.style.justifyContent = "center";
        let v = document.createElement("div");
        v.classList.add("tutorialContainer"), v.style.display = "flex", v.style.alignItems = "center", v.style.justifyContent = "center";
        let E = createDownloadIcon();
        v.appendChild(E), C.appendChild(v), s.appendChild(C);
        let b = document.createElement("div");
        b.style.textAlign = "center", b.innerHTML = "Laxis provides multiple formats for downloading the transcripts.", s.appendChild(b), l.appendChild(s), n.appendChild(l), dragElement(n)
    }
};

function addRoot() {
    const e = document.createElement("div");
    e.setAttribute("id", "laxis-root"), e.style.position = "absolute", e.style.zIndex = "2000", e.style.right = currentRight, e.style.top = currentTop, e.style.height = "10px", e.style.width = "10px", document.body.appendChild(e)
}

function addMiniPanel() {
    const e = document.getElementById("laxis-root"),
        t = document.createElement("div");
    t.setAttribute("id", "laxis-miniPanel"), t.classList.add("panelBase"), t.style.width = "60px", t.style.paddingBottom = "16px", t.style.backgroundColor = "#292c35";
    const n = document.createElement("div");
    n.setAttribute("name", "laxis-rootHeader"), n.style.cursor = "move", n.classList.add("col-12"), n.style.height = "50px", n.style.width = "50px", n.style.marginBottom = "-10px", n.style.cursor = "move", n.style.zIndex = "999";
    const l = document.createElement("img");
    l.src = chrome.runtime.getURL("image/logo.png"), l.addEventListener("click", (function() {
        window.open(`${domainUrl}/login`)
    })), l.style.cursor = "pointer", l.style.marginTop = "10px", l.style.height = "25px", l.style.width = "75px", l.style.marginLeft = "-16px", l.alt = "none", n.appendChild(l), t.appendChild(n);
    const i = document.createElement("div");
    i.title = "Expand", i.id = "laxis-expandPanel", i.classList.add("miniButtonContainer"), i.addEventListener("click", addTutorialPanel);
    const o = createExpandIcon();
    o.id = "expandInputIcon", i.appendChild(o), t.appendChild(i), e.appendChild(t), dragElement(e)
}
const addCaptionPanel = () => {
        const e = findButtonContainer(),
            t = document.getElementById("laxis-root");
        if (e && !e.__gmt_button_added) {
            e.__gmt_button_added = !0;
            const n = document.getElementById("laxis-miniPanel"),
                l = document.createElement("div");
            l.title = "Captions settings", l.setAttribute("id", "laxis-caption-toggle-mini"), l.classList.add("miniButtonContainer"), l.addEventListener("click", getToSettings);
            const i = createCaptionOnIcon();
            i.id = "captionIconMini", l.appendChild(i), n.appendChild(l);
            const o = document.createElement("div");
            o.title = "Download", o.setAttribute("id", "laxis-download-menu-mini"), o.classList.add("miniButtonContainer"), o.addEventListener("click", displayMenu);
            const d = createDownloadIcon();
            d.id = "downloadIconMini", d.style.width = "20px", d.style.height = "20px", o.appendChild(d), n.appendChild(o);
            const a = document.createElement("div");
            a.style.margin = "12px 5px 0px", a.style.padding = "6px 12px", a.style.borderRadius = "12px", a.style.backgroundColor = "#3e4149";
            for (let e = 0; e < bookmarkList.length; e++) {
                const t = document.createElement("div"),
                    n = document.createElement("div");
                t.style.display = "flex", t.style.flexDirection = "column", t.style.alignItems = "center", n.title = `Highlight as ${bookmarkList[e].name}`, n.classList.add("flagContainerMini"), n.id = `laxis-highlight-${bookmarkList[e].code}-mini`, n.onclick = () => {
                    highlight(e)
                };
                const l = createSVGIcon(bookmarkList[e].attributes, bookmarkList[e].content);
                n.appendChild(l), t.appendChild(n), a.appendChild(t)
            }
            n.appendChild(a), n.style.display = "block";
            let s = document.getElementById("laxis-mainPanel");
            s && t.removeChild(s);
            const c = document.createElement("div");
            c.setAttribute("id", "laxis-mainPanel"), c.classList.add("panelBase"), c.style.width = "300px", c.style.display = "none";
            const r = document.createElement("div");
            r.setAttribute("name", "laxis-rootHeader"), r.style.cursor = "move", r.style.width = "300px", r.style.height = "50px", r.style.backgroundColor = "#454953", r.style.borderRadius = "12px 12px 0 0", r.style.display = "flex", r.style.alignItems = "center", r.style.justifyContent = "space-between";
            const p = document.createElement("div");
            p.style.display = "flex", p.style.alignItems = "center", p.style.paddingLeft = "8px";
            const m = document.createElement("img");
            m.src = chrome.runtime.getURL("image/logo.png"), m.alt = "none", m.addEventListener("click", (function() {
                window.open(`${domainUrl}/login`)
            })), m.style.height = "30px", m.style.marginLeft = "-16px", m.style.cursor = "pointer", m.style.zIndex = "999", p.appendChild(m), r.appendChild(p);
            const u = document.createElement("div");
            u.style.display = "flex", u.style.alignItems = "center";
            const y = document.createElement("div");
            y.title = "Retrieve local data", y.setAttribute("id", "laxis-repair"), y.classList.add("imageContainer"), y.style.display = "none", y.addEventListener("click", extractLocalStorage);
            const g = document.createElement("img");
            g.id = "restoreIcon", g.src = chrome.runtime.getURL("image/repair.svg"), g.style.width = "15px", g.style.height = "18px", y.appendChild(g), u.appendChild(y);
            const h = document.createElement("div");
            h.title = "Captions settings", h.setAttribute("id", "laxis-caption-toggle"), h.classList.add("imageContainer"), h.addEventListener("click", getToSettings);
            const x = createCaptionOnIcon();
            x.id = "captionIcon", h.appendChild(x), u.appendChild(h);
            const C = document.createElement("div");
            C.title = "Auto-Scroll", C.setAttribute("id", "laxis-autoScroll");
            const v = document.createElement("input");
            v.type = "hidden", v.value = 1, v.setAttribute("id", "autoscroll"), v.onchange = () => autoScroll(), C.appendChild(v), C.classList.add("imageContainer"), C.addEventListener("click", (function() {
                let e = document.getElementById("autoscroll");
                "0" === e.value.toString() ? e.value = 1 : e.value = 0, autoScroll()
            }));
            const E = createAutoScrollIcon();
            E.style.width = "15px", E.style.height = "15px", C.appendChild(E), u.appendChild(C);
            const b = document.createElement("div");
            b.title = "Download", b.id = "laxis-openDownloadMenu", b.classList.add("imageContainer"), b.addEventListener("click", displayMenu);
            const f = createDownloadIcon();
            f.style.width = "15px", f.style.height = "15px", b.appendChild(f), u.appendChild(b);
            const L = document.createElement("div");
            L.title = "Minimize", L.id = "laxis-minimizePanel", L.classList.add("imageContainer"), L.addEventListener("click", minimize);
            const k = createCollapseIcon();
            k.style.width = "15px", k.style.height = "15px", L.appendChild(k), u.appendChild(L), r.appendChild(u), c.appendChild(r);
            const I = document.createElement("div");
            I.style.width = "300px", I.style.backgroundColor = "#292c35", I.style.paddingTop = "8px";
            const w = document.createElement("div");
            w.id = "login-prompt", w.style.display = "none", w.style.margin = "0px 8px", w.style.padding = "4px", w.style.textAlign = "center", w.addEventListener("click", signup), w.style.cursor = "pointer", w.innerHTML = "Please <span  style='color:#2196f3'>log in</span> to enable autosave to Laxis Cloud.", w.style.borderRadius = "12px", w.style.border = "1px solid rgba(255, 255, 255, 0.5)", w.style.backgroundColor = "#454953", w.style.color = "#ffffff", w.style.fontSize = "10px";
            const T = document.createElement("div");
            T.id = "google-meet-quota", T.style.display = "none", T.style.margin = "0px 8px", T.style.padding = "4px", T.style.textAlign = "center", T.addEventListener("click", upgrade), T.style.cursor = "pointer", T.innerHTML = "Used Google Meet Quota: ", T.style.borderRadius = "12px", T.style.border = "1px solid rgba(255, 255, 255, 0.5)", T.style.backgroundColor = "#454953", T.style.color = "#ffffff", T.style.fontSize = "10px";
            const M = document.createElement("div");
            M.id = "meeting-name", M.style.fontWeight = "bold", M.style.padding = "8px", M.style.color = "#FFFFFF", I.appendChild(w), I.appendChild(T), I.appendChild(M);
            const B = document.createElement("div");
            B.style.paddingTop = "8px", B.style.width = "25%", I.style.paddingBottom = "8px", c.appendChild(I);
            const S = document.createElement("div");
            S.setAttribute("id", "feature"), S.style.width = "300px", S.style.backgroundColor = "#292c35", S.style.borderRadius = "0 0 12px 12px";
            const A = document.createElement("div");
            A.setAttribute("id", "caption"), A.style.height = "350px", A.style.width = "300px", A.style.overflowY = "auto", A.style.overflowX = "hidden", A.style.color = "#FFFFFF", A.style.paddingRight = "8px", A.onwheel = () => {
                v.value = 0
            }, S.appendChild(A);
            const H = document.createElement("div");
            H.id = "highlight-laxis", H.style.width = "300px", H.style.backgroundColor = "#292c35", H.style.display = "flex", H.style.justifyContent = "space-around", H.style.borderTop = "1px solid #e0e0e0", H.style.paddingTop = "10px", H.style.paddingBottom = "10px", H.classList.add("popup"), H.style.borderRadius = "0 0 12px 12px";
            for (let e = 0; e < bookmarkList.length; e++) {
                const t = document.createElement("div"),
                    n = document.createElement("div");
                t.style.display = "flex", t.style.flexDirection = "column", t.style.alignItems = "center", n.style.textAlign = "center", n.style.fontSize = "10px", n.style.color = "#9e9e9e", n.style.marginTop = "4px", n.innerHTML = bookmarkList[e].name, n.id = `laxis-highlight-${bookmarkList[e].code}-title`;
                const l = document.createElement("div");
                l.title = `Highlight as ${bookmarkList[e].name}`, l.classList.add("flagContainer"), l.id = `laxis-highlight-${bookmarkList[e].code}`;
                const i = createSVGIcon(bookmarkList[e].attributes, bookmarkList[e].content);
                l.appendChild(i), l.onclick = () => {
                    highlight(e)
                }, t.appendChild(l), t.appendChild(n), H.appendChild(t)
            }
            let N = document.createElement("div");
            N.id = "popup", N.className = "popupText", N.innerHTML = "Test", N.onclick = () => {
                clearTimeout(notificationsTimeout), N.classList.remove("show")
            }, H.appendChild(N), S.appendChild(H), c.appendChild(S), t.appendChild(c), dragElement(t), autoScroll(), document.getElementById("laxis-downloadMenu") || addDownloadMenu(), checkCaptionStatusInterval = setInterval(checkCaptionStatus, 500), turnOnCaptions(), debug("turned on caption"), removeCaptionPanel(), checkToken(), autoSaveInterval = setInterval((() => {
                let e = document.getElementById("autoSaveCheck");
                e && e.checked && Export2App(!0).catch((e => {
                    console.error(e);
                    const t = get(ERROR_SAVING) || [];
                    set(ERROR_SAVING, [...t, e])
                }))
            }), 3e5), setTimeout(updateMeetingName, 500), clearInterval(checkOngoingMeeting)
        }
    },
    addDownloadMenu = () => {
        let e = document.createElement("div");
        e.id = "laxis-downloadMenu", e.className = "modal", e.style.display = "none";
        let t = document.createElement("div");
        t.className = "modal-content", t.id = "laxis-downloadMenuContent";
        let n = document.createElement("div");
        n.className = "modal-header", n.innerHTML = "Download", t.appendChild(n);
        let l = document.createElement("div"),
            i = document.createElement("div");
        i.className = "modal-body", i.innerHTML = "File Type<select name='extension' id='extension' value='txt'><option value='txt'>txt</option><option value='app'>Laxis Cloud</option><option value='doc'>doc</option><option value='pdf'>pdf</option></select>", l.appendChild(i);
        let o = document.createElement("div");
        o.className = "modal-body", o.innerHTML = "<div>Highlights</div><div><input type='checkbox' name='highlightCheck' id='highlightCheck' checked='true'/></div>", l.appendChild(o);
        let d = document.createElement("div");
        d.className = "modal-body", d.innerHTML = "<div>Timestamps</div><div><input type='checkbox' name='timestampCheck' id='timestampCheck'/></div>", l.appendChild(d);
        let a = document.createElement("div");
        a.className = "modal-body", a.title = "Autosave to Laxis every 5 minutes", a.style.cursor = "help", a.innerHTML = "<div>Autosave to Laxis Cloud</div><div><input type='checkbox' name='autoSaveCheck' id='autoSaveCheck'/></div>", l.appendChild(a), t.appendChild(l);
        let s = document.createElement("div");
        s.className = "modal-footer";
        let c = document.createElement("button");
        c.classList.add("modal-button"), c.id = "laxis-close-menu", c.style.border = "solid 2px #292c35", c.style.backgroundColor = "#454953", c.innerHTML = "Cancel", c.onclick = () => {
            document.getElementById("laxis-downloadMenu").style.display = "none"
        }, s.appendChild(c);
        let r = document.createElement("button");
        r.classList.add("modal-button"), r.style.backgroundColor = "#292c35", r.style.boxShadow = "box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.29)", r.innerHTML = "Download", r.addEventListener("click", downloadTranscript), r.setAttribute("id", "laxis-confirm-download"), s.appendChild(r), t.appendChild(s), e.appendChild(t);
        const p = document.getElementById("laxis-root");
        p && p.appendChild(e)
    },
    minimize = () => {
        const e = document.getElementById("laxis-mainPanel"),
            t = document.getElementById("laxis-miniPanel");
        e.style.display = "none", t.style.display = "block"
    },
    autoScroll = () => {
        let e = document.getElementById("laxis-autoScroll");
        e.style.border = "1px solid #2196f3";
        const t = document.getElementById("caption"),
            n = document.getElementById("autoscroll"),
            l = setInterval((function() {
                "0" === n.value.toString() ? (clearInterval(l), e.style.border = "1px solid #292c35") : t.scrollTop = t.scrollHeight
            }), 1e3)
    },
    updateMeetingName = () => {
        const e = document.getElementById("meeting-name");
        getMeetingName() ? (e.innerHTML = getMeetingName(), chrome.runtime.sendMessage({
            type: "meetingName",
            meetingName: getMeetingName()
        })) : (e.innerHTML = getDefaultName(), chrome.runtime.sendMessage({
            type: "meetingName",
            meetingName: getDefaultName()
        }))
    },
    highlight = e => {
        let t = document.getElementById("highlight-laxis"),
            n = document.getElementById("popup"),
            l = document.getElementById("laxis-miniPanel");
        weTurnedCaptionsOn ? bookmarkList.forEach(((l, i) => {
            const o = t.childNodes[i].childNodes[0],
                d = t.childNodes[i].childNodes[1],
                a = document.getElementById(`laxis-highlight-${bookmarkList[i].code}-mini`);
            i === e ? l.enable ? (l.enable = !1, o.style.backgroundColor = "", a.style.backgroundColor = "", d.style.color = "#9e9e9e", clearTimeout(notificationsTimeout), n.classList.remove("show")) : (l.enable = !0, o.style.backgroundColor = "#696969", a.style.backgroundColor = "#696969", d.style.color = "#ffffff", n.innerHTML = "Your conversation is being highlighted.", n.style.backgroundColor = "#454953", n.style.color = l.code, n.classList.add("show"), clearTimeout(notificationsTimeout), notificationsTimeout = setTimeout((() => {
                n.classList.remove("show")
            }), notificationsTimeoutDuration)) : (l.enable = !1, o.style.backgroundColor = "", a.style.backgroundColor = "", d.style.color = "#9e9e9e")
        })) : (l.style.display && alert("Your caption is turned off"), n.style.backgroundColor = "#818388", n.style.color = "#292c35", n.innerHTML = "Your caption is turned off", n.classList.add("show"), clearTimeout(notificationsTimeout), notificationsTimeout = setTimeout((() => {
            n.classList.remove("show")
        }), notificationsTimeoutDuration))
    };