function addDice() {
    let amount = +document.getElementById('dice-amount').innerText
    document.getElementById('dice-amount').innerText = `${amount + 1}`
}

function removeDice() {
    let amount = +document.getElementById('dice-amount').innerText
    if (amount > 1) {
        document.getElementById('dice-amount').innerText = `${amount - 1}`
    }
}

function url() {
    return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
}

function register() {
    let httpRequest = new XMLHttpRequest();
    httpRequest.open('POST', url() + '/dice/' + document.getElementById('room').value + '/register')
    httpRequest.setRequestHeader('Content-Type', 'application/json')
    httpRequest.send(JSON.stringify({
        name: document.getElementById('name').value,
        overlay: document.getElementById('overlayId').value,
        id: document.getElementById('room').value + ':' + localStorage.getItem('userId')
    }))
}

function start(event = undefined) {
    if ((!event || event.keyCode === 13) && document.getElementById('name').value.length > 0 && document.getElementById('room').value.length > 0) {
        document.getElementById('overlayId').value = url() + '/overlay/' + document.getElementById('room').value + ':' + localStorage.getItem('userId') + '?scale=10&clearAfter=30';
        document.getElementById('resultsId').value = url() + '/overlay/' + document.getElementById('room').value + '/results';
        document.getElementById('myResultsId').value = document.getElementById('resultsId').value + '?name=' + encodeURIComponent(document.getElementById('name').value) + '&user=' + localStorage.getItem('userId');
        document.getElementById('resultFrame').src = document.getElementById('myResultsId').value;
        document.getElementById('diceFrame').src = document.getElementById('overlayId').value;
        document.getElementById('roll').hidden = false;
        document.getElementById('start-container').hidden = true;
        document.getElementById('options-container').hidden = false;
        document.getElementById('dice-tower').hidden = false;
        document.getElementById('name').hidden = true;
        document.getElementById('room').hidden = true;
        document.getElementById('how-to').hidden = true;
        document.getElementById('chatOverlay').hidden = true;
        document.getElementById('results').hidden = false;
        document.getElementById('all-results').hidden = !document.getElementById('gm').checked;
        document.getElementById('all-results-urls').style.display = document.getElementById('gm').checked ? 'fles' : 'none';
        document.getElementById('nameH').innerHTML = '<strong style="font-size:x-large;">' + document.getElementById('name').value + '</strong>';
        document.getElementById('save-dice-hint-name').innerHTML = '<strong>' + document.getElementById('name').value + '</strong>';
        document.getElementById('roomLabel').hidden = true;
        document.getElementById('nameLabel').hidden = true;
        document.getElementById('nameH').hidden = false;
        document.getElementById('room-hint').innerHTML = '<p>Room: <strong style="font-size:medium;">' + document.getElementById('room').value + '</strong></p>';
        document.getElementById('overlayLabel').innerHTML = 'Dice-Overlay for <strong>' + document.getElementById('name').value + '</strong>';
        document.title = document.getElementById('name').value + ' - Dice-Tower';

        localStorage.setItem('last-name', document.getElementById('name').value)
        localStorage.setItem('last-room', document.getElementById('room').value)
        localStorage.setItem('last-gm', document.getElementById('gm').checked)

        if (localStorage.getItem(document.getElementById('name').value + "-theme")) {
            document.getElementById('theme').value = localStorage.getItem(document.getElementById('name').value + "-theme")
        }
        if (localStorage.getItem(document.getElementById('name').value + "-faceColor")) {
            document.getElementById('faceColor').setColor(localStorage.getItem(document.getElementById('name').value + "-faceColor"));
        }
        if (localStorage.getItem(document.getElementById('name').value + "-numberColor")) {
            document.getElementById('numberColor').setColor(localStorage.getItem(document.getElementById('name').value + "-numberColor"));
        }

        if (!localStorage.getItem(document.getElementById('name').value + '-started')) {
            document.getElementById('urls-overlay').showPopover();
        }

        localStorage.setItem(document.getElementById('name').value + '-started', "true")

        register();
        if (document.getElementById('gm').checked) {
            document.getElementById('resultSwitch').checked = true;
            document.getElementById('resultFrame').src = document.getElementById('resultsId').value;
            const evtSource = new EventSource(url() + '/dice/' + document.getElementById('room').value + '/users');
            evtSource.addEventListener('message', function (event) {
                let data = JSON.parse(event.data);
                if (data.id !== document.getElementById('room').value + ':' + localStorage.getItem('userId')) {
                    let overlays = document.getElementById('overlay-urls');
                    let newOverlay = document.getElementById(data.id) ?? document.createElement('div');
                    newOverlay.replaceChildren(...[]);
                    newOverlay.id = data.id;
                    newOverlay.style.display = "flex";
                    newOverlay.style.flexDirection = "row";
                    newOverlay.style.justifyContent = "space-between";
                    newOverlay.style.alignItems = "baseline";
                    let newLabel = document.createElement('label');
                    newLabel.for = data.id + 'url';
                    newLabel.innerHTML = "Dice-Overlay for <strong>" + data.name + "</strong>";
                    let newInput = document.getElementById('overlayId').cloneNode();
                    newInput.type = "text";
                    newInput.readOnly = true;
                    newInput.id = data.id + 'url';
                    newInput.style.flexGrow = '1';
                    newInput.value = data.overlay;
                    newInput.onclick = () => copyToClipboard(newInput.id)
                    newOverlay.appendChild(newLabel);
                    newOverlay.appendChild(newInput);
                    overlays.appendChild(newOverlay);

                    if (!document.getElementById(data.id + '-diceFrame')) {
                        let dice = document.createElement('iframe');
                        dice.id = data.id + '-diceFrame'
                        dice.style.width = "50%";
                        dice.style.height = "100%";
                        dice.style.overflow = "hidden";
                        dice.style.border = "0";
                        dice.style.zIndex = "4";
                        dice.style.position = "absolute";
                        dice.style.top = "0";
                        dice.style.left = "50%";
                        dice.src = data.overlay;
                        document.getElementById('results-dice').appendChild(dice)

                    }
                }

                configurePopover();
            });
        }
    }
}

function rollEasy(dice) {
    document.getElementById('command').value = document.getElementById('dice-amount').innerText + dice;
    roll();
}

function roll(event) {
    if ((!event || event.keyCode === 13) && document.getElementById('command').value?.length > 0) {
        register()
        let httpRequest = new XMLHttpRequest();
        httpRequest.open('POST', url() + '/dice/' + document.getElementById('room').value + ':' + localStorage.getItem(`userId`))
        httpRequest.setRequestHeader('Content-Type', 'application/json')
        httpRequest.send(JSON.stringify({
            name: document.getElementById('name').value,
            command: document.getElementById('command').value,
            faceColor: document.getElementById('faceColor').value,
            numberColor: document.getElementById('numberColor').value,
            theme: document.getElementById('theme').value
        }))
    }
}

function saveDice() {
    localStorage.setItem(document.getElementById('name').value + "-theme", document.getElementById('theme').value)
    localStorage.setItem(document.getElementById('name').value + "-faceColor", document.getElementById('faceColor').value)
    localStorage.setItem(document.getElementById('name').value + "-numberColor", document.getElementById('numberColor').value)
}

function configurePopover() {

    const popover = document.querySelectorAll("[popovertarget][data-trigger='hover']");
    popover.forEach((e) => {

        const target = document.querySelector("#" + e.getAttribute("popovertarget"));
        e.addEventListener("mouseover", () => {
            showSnackbar(target.innerHTML);
        });
        e.addEventListener("mouseout", () => {
            hideSnackbar();
        });

    });
}

function copyToClipboard(id) {
    let copyText = document.getElementById(id);
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(copyText.value).then(() => {
        showSnackbar("<i class='fa-regular fa-copy'></i> Link copied to clipboard: <br/>" + copyText.value);
    })
}

function showSnackbar(message) {
    let snackbar = document.getElementById("snackbar");
    let snackbarContainer = document.getElementById("snackbar-container");
    snackbar.innerHTML = message;
    snackbar.className = "show";
    snackbarContainer.className = "show";
}

function hideSnackbar() {
    let snackbar = document.getElementById("snackbar");
    let snackbarContainer = document.getElementById("snackbar-container");
    snackbar.className = snackbar.className.replace("show", "");
    snackbarContainer.className = snackbarContainer.className.replace("show", "");
}

document.addEventListener("DOMContentLoaded", async () => {

    document.querySelector('meta[property="og:url"]').setAttribute("content", url());
    document.querySelector('meta[property="twitter:url"]').setAttribute("content", url());
    document.querySelector('meta[property="og:image"]').setAttribute("content", url() + '/rich.png');
    document.querySelector('meta[name="twitter:image"]').setAttribute("content", url() + '/rich.png');
    document.querySelector('meta[property="twitter:domain"]').setAttribute("content", window.location.hostname);

    if (localStorage.getItem('last-name') && localStorage.getItem('last-room')) {
        document.getElementById('name').value = localStorage.getItem('last-name');
        document.getElementById('room').value = localStorage.getItem('last-room');
        document.getElementById('gm').checked = localStorage.getItem('last-gm') === 'true';
    }

    document.getElementById('resultSwitch').addEventListener('change', function () {
        if (!this.checked) {
            document.getElementById('resultFrame').src = document.getElementById('myResultsId').value;
        } else {
            document.getElementById('resultFrame').src = document.getElementById('resultsId').value;
        }
    })

    document.getElementById('resultDiceSwitch').addEventListener('change', function () {
        document.getElementById('results-dice').hidden = !this.checked;
    })

    document.getElementById('chatOverlayLink').href = url() + '/chatoverlay'

    configurePopover();
})

