const log_prefix = "[TeaSpeak::Preview] ";

const object =
"<div style='position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 99999999999999999999999999;'>" +
    "<div style='\n" +
                "font-family: \"Open Sans\"," +
                "sans-serif;\n" +
                "width: 100%;\n" +
                "margin: 0;\n" +
                "height: 40px;\n" +
                "font-size: 17px;\n" +
                "font-weight: 400;\n" +
                "padding: .33em .5em;\n" +
                "color: #5c5e60;\n" +
                "position: fixed;\n" +
                "background-color: white;\n" +
                "box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);" +
                "display: flex;\n" +
                "flex-direction: row;\n" +
                "justify-content: center;" +
                "align-items: center;'" +
    ">" +
        "<div style='margin-right: .67em;display: inline-block;line-height: 1.3;text-align: center'>You're in TeaWeb website preview mode. Click <a href='#' class='button-open'>here</a> to open the website in the browser</div>" +
    "</div>" +
    "<div style='display: table-cell;width: 1.6em;'>" +
        "<a style='font-size: 14px;\n" +
                    "top: 13px;\n" +
                    "right: 25px;\n" +
                    "width: 15px;\n" +
                    "height: 15px;\n" +
                    "opacity: .3;\n" +
                    "color: #000;\n" +
                    "cursor: pointer;\n" +
                    "position: absolute;\n" +
                    "text-align: center;\n" +
                    "line-height: 15px;\n" +
                    "z-index: 1000;\n" +
                    "text-decoration: none;'" +
        "class='button-close'>" +
            "✖" +
        "</a>" +
    "</div>" +
"</div>";

const element = document.createElement("div");
element.id = "TeaClient-Overlay-Container";
document.body.append(element);
element.innerHTML = object;

{
    const buttons = element.getElementsByClassName("button-close");
    if(buttons.length < 1) {
        console.warn(log_prefix + "Failed to find close button for preview notice!");
    } else {
        for(const button of buttons) {
            (<HTMLElement>button).onclick = event => {
                console.trace(log_prefix + "Closing preview notice");
                element.remove();
            };
        }
    }
}
{
    const buttons = element.getElementsByClassName("button-open");
    if(buttons.length < 1) {
        console.warn(log_prefix + "Failed to find open button for preview notice!");
    } else {
        for(const element of buttons) {
            (<HTMLElement>element).onclick = event => {
                console.info(log_prefix + "Opening URL with default browser");
                require("electron").ipcRenderer.send('preview-action', {
                    action: 'open-url',
                    url: document.documentURI
                });
            };
        }
    }
}