/* ===================== AUTOGENERATED SOURCE IMPORT ===================== */

import Template from "/emcJS/util/html/template/HTMLTemplate.js";

const TPL = new Template(`
    <div id="form">
        <label class="label">
            <emc-i18n-label class="labelText" i18n-value="Hostname"></emc-i18n-label>
            <emc-input-wrapper>
                <input id="apHostname" value="archipelago.gg">
            </emc-input-wrapper>
        </label>
        <label class="label">
            <emc-i18n-label class="labelText" i18n-value="Port"></emc-i18n-label>
            <emc-input-wrapper>
                <input id="apPort" type="number" min="1" max="65535">
            </emc-input-wrapper>
        </label>
        <label class="label">
            <emc-i18n-label class="labelText" i18n-value="Slot name"></emc-i18n-label>
            <emc-input-wrapper>
                <input id="apSlotName">
            </emc-input-wrapper>
        </label>
        <label class="label">
            <emc-i18n-label class="labelText" i18n-value="Password"></emc-i18n-label>
            <emc-input-wrapper>
                <input id="apPassword" type="password">
            </emc-input-wrapper>
        </label>
        <label class="label">
            <emc-i18n-label class="labelText" i18n-value="Sync Settings"></emc-i18n-label>
            <emc-input-wrapper>
                <input id="apSettingsSync" type="checkbox">
            </emc-input-wrapper>
        </label>
    </div>
    <div id="footer">
        <button id="purge">
            purge ap state
        </button>
        <button id="connect">
            connect
        </button>
        <button id="disconnect" class="hidden">
            disconnect
        </button>
        <button id="cancel">
            cancel
        </button>
    </div>
    
`);

import GlobalStyle from "/emcJS/util/html/template/CSSTemplate.js";

const STYLE = new GlobalStyle(`
    :host {
        box-sizing: border-box;
        z-index: 900900;
        pointer-events: all;
    }
    
    button:disabled {
        color: var(--button-disabled-text-color, #757575) !important;
        background-color: var(--button-disabled-back-color, #999999) !important;
        background-image: var(--button-disabled-back-image, none) !important;
        border-color: var(--button-disabled-border-color, #6a6a6a) !important;
        cursor: default !important;
        pointer-events: none !important;
    }
    
    #footer,
    #connect,
    #disconnect,
    #cancel,
    #purge {
        display: flex;
    }
    
    #form {
        display: flex;
        flex-direction: column;
        padding: 10px;
    }
    
    #form .label {
        display: flex;
        margin: 5px 0;
    }
    
    #form .labelText {
        width: 100px;
        justify-content: flex-start;
    }
    
    #form input:not([type="checkbox"]) {
        flex: 1;
    }
    
    #footer {
        align-items: center;
        justify-content: flex-end;
        min-height: 50px;
        padding: 5px;
        color: var(--modal-footer-text-color, #000000);
        background-color: var(--modal-footer-back-color, #e4e4e4);
        background-image: var(--modal-footer-back-image, none);
        border-top: solid var(--modal-border-width, 2px) var(--modal-border-color, #cccccc);
    }
    
    #connect,
    #disconnect,
    #cancel,
    #purge {
        align-items: center;
        justify-content: center;
        padding: 5px;
        color: var(--button-text-color, #000000);
        background-color: var(--button-back-color, #eaeaea);
        border-style: solid;
        border-width: var(--button-border-width, 2px);
        border-color: var(--button-border-color, #222222);
        border-radius: var(--button-border-radius, 6px);
        font-weight: 900;
        text-transform: uppercase;
        cursor: pointer;
        user-select: none;
        appearance: none;
    }
    
    #connect,
    #disconnect,
    #cancel {
        margin-left: 10px;
    }
    
    #purge {
        margin-right: auto;
    }
    
    #connect:hover,
    #disconnect:hover,
    #cancel:hover,
    #purge:hover {
        color: var(--button-hover-text-color, #ffffff);
        background-color: var(--button-hover-back-color, #353935);
        border-color: var(--button-hover-border-color, #222222);
    }
    
    #connect.hidden,
    #disconnect.hidden,
    #purge.hidden {
        display: none;
    }
    
    #window {
        width: auto;
        min-width: min(400px, -50px + 100vw);
    }
    
`);

/* ======================================================================= */

import Window from "/emcJS/ui/overlay/window/Window.js";
import Dialog from "/emcJS/ui/overlay/window/Dialog.js";
import "/emcJS/ui/input/InputWrapper.js";
import "/emcJS/ui/i18n/I18nLabel.js";
import Savestate from "/GameTrackerJS/savestate/Savestate.js";
import SavestateHandler from "/GameTrackerJS/savestate/SavestateHandler.js";
import ArchipelagoController from "../../util/archipelago/ArchipelagoController.js";
import {
    AP_STORAGES
} from "../../util/archipelago/storage/RegisterAPStorage.js";

const APStateStorage = Savestate.getStorage("APConfig");

export default class APWindow extends Window {

    #apHostnameEl;

    #apPortEl;

    #apSlotNameEl;

    #apPasswordEl;

    #apSettingsSyncEl;

    #connectEl;

    #disconnectEl;

    #purgeEl;

    constructor() {
        super("Archipelago");
        const els = TPL.generate();
        STYLE.apply(this.shadowRoot);
        /* --- */
        const windowEl = this.shadowRoot.getElementById("window");
        const bodyEl = this.shadowRoot.getElementById("body");
        const formEl = els.getElementById("form");
        const footerEl = els.getElementById("footer");

        bodyEl.append(formEl);
        windowEl.append(footerEl);

        this.#apHostnameEl = this.shadowRoot.getElementById("apHostname");
        this.#apPortEl = this.shadowRoot.getElementById("apPort");
        this.#apSlotNameEl = this.shadowRoot.getElementById("apSlotName");
        this.#apPasswordEl = this.shadowRoot.getElementById("apPassword");
        this.#apSettingsSyncEl = this.shadowRoot.getElementById("apSettingsSync");

        this.#connectEl = this.shadowRoot.getElementById("connect");
        this.#connectEl.addEventListener("click", () => this.connect());

        this.#disconnectEl = this.shadowRoot.getElementById("disconnect");
        this.#disconnectEl.addEventListener("click", () => this.disconnect());

        const cancelEl = this.shadowRoot.getElementById("cancel");
        cancelEl.addEventListener("click", () => this.cancel());

        this.#purgeEl = this.shadowRoot.getElementById("purge");
        this.#purgeEl.addEventListener("click", () => this.#purgeAPState());
    }

    show() {
        const {apHostname, apPort, apSlotName, apSettingsSync} = APStateStorage.getAll();

        this.#apHostnameEl.value = apHostname ?? "archipelago.gg";
        this.#apPortEl.value = apPort;
        this.#apSlotNameEl.value = apSlotName ?? "";
        this.#apPasswordEl.value = "";
        this.#apSettingsSyncEl.checked = apSettingsSync ?? true;

        if (ArchipelagoController.isConnected()) {
            this.#apHostnameEl.setAttribute("disabled", "");
            this.#apPortEl.setAttribute("disabled", "");
            this.#apSlotNameEl.setAttribute("disabled", "");
            this.#apPasswordEl.setAttribute("disabled", "");
            this.#connectEl.classList.add("hidden");
            this.#purgeEl.classList.add("hidden");
            this.#disconnectEl.classList.remove("hidden");
        }

        super.show();
    }

    async connect() {
        const apHostname = this.#apHostnameEl.value;
        const apPort = parseInt(this.#apPortEl.value) || "";
        const apSlotName = this.#apSlotNameEl.value;
        const apPassword = this.#apPasswordEl.value;
        const apSettingsSync = this.#apSettingsSyncEl.checked;

        try {
            this.#connectEl.innerText = "connecting...";
            this.#connectEl.disabled = true;
            await ArchipelagoController.connect(apHostname, apPort, apSlotName, apPassword, apSettingsSync);
            APStateStorage.setAll({apHostname, apPort, apSlotName, apSettingsSync});
            this.remove();
        } catch (error) {
            Dialog.error("Error", "An error occured", [error]);
        } finally {
            this.#connectEl.innerText = "connect";
            this.#connectEl.disabled = false;
        }
    }

    async disconnect() {
        ArchipelagoController.disconnect();
        this.remove();
    }

    cancel() {
        this.remove();
    }

    remove() {
        super.remove();

        this.#apHostnameEl.removeAttribute("disabled");
        this.#apPortEl.removeAttribute("disabled");
        this.#apSlotNameEl.removeAttribute("disabled");
        this.#apPasswordEl.removeAttribute("disabled");
        this.#connectEl.classList.remove("hidden");
        this.#purgeEl.classList.remove("hidden");
        this.#disconnectEl.classList.add("hidden");
    }

    async #purgeAPState() {
        const result = await Dialog.confirm("Delete AP Savedata", "Do you really want to delete the AP Item/Location data");
        if (result === true) {
            AP_STORAGES.items.clearAsChange();
            AP_STORAGES.locations.clearAsChange();
            Savestate.deleteMeta("archipelago");
            SavestateHandler.forceCache();
        }
    }

}

customElements.define("tootr-window-ap", APWindow);
