// This file handles the "Confirm instance details" dialog

import { resize } from "./image.mjs";
import knownSoftware from "./known_software.mjs";

const blankImage = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";

export function initializeInstanceDetailsDialog(
    dialog: HTMLDialogElement,
    callback: (
        instanceName: string,
        instanceHost: string,
        instanceHostSecure: boolean,
        instanceSoftware: string,
        instanceIcon: string | null
    ) => void
): {
    showInstanceDetailsDialog: () => void,
    hideInstanceDetailsDialog: () => void,
    populateInstanceDetailsDialog: (
        instanceNameValue: string,
        instanceHostValue: string,
        instanceHostSecureValue: boolean,
        instanceSoftwareValue: string,
        instanceIconValue: string | null
    ) => void
} {
    const showInstanceDetailsDialog = () => dialog.showModal();
    const hideInstanceDetailsDialog = () => dialog.close();

    const form = dialog.querySelector(".instanceDetailsForm");
    if (!(form instanceof HTMLFormElement))
        throw new Error(".instanceDetailsForm isn't a form");

    const instanceName = form.querySelector("#instanceName");
    if (!(instanceName instanceof HTMLInputElement))
        throw new Error("#instanceName isn't an input");

    const instanceHost = form.querySelector("#instanceHost");
    if (!(instanceHost instanceof HTMLInputElement))
        throw new Error("#instanceHost isn't an input");

    const instanceHostSecure = form.querySelector("#instanceHostSecure");
    if (!(instanceHostSecure instanceof HTMLInputElement))
        throw new Error("#instanceHostSecure isn't an input");

    const instanceSoftware = form.querySelector("#instanceSoftware");
    if (!(instanceSoftware instanceof HTMLSelectElement))
        throw new Error("#instanceSoftware isn't a select");

    for (const [name, software] of Object.entries(knownSoftware.software)) {
        const option = new Option(software.name, name);
        instanceSoftware.appendChild(option);
    }

    const instanceIcon = form.querySelector("#instanceIcon");
    if (!(instanceIcon instanceof HTMLImageElement))
        throw new Error("#instanceIcon isn't an image");

    instanceIcon.src = blankImage;

    const populateInstanceDetailsDialog = (
        instanceNameValue: string,
        instanceHostValue: string,
        instanceHostSecureValue: boolean,
        instanceSoftwareValue: string,
        instanceIconValue: string | null
    ) => {
        instanceName.value = instanceNameValue;
        instanceHost.value = instanceHostValue;
        instanceHostSecure.checked = instanceHostSecureValue;
        instanceSoftware.value = instanceSoftwareValue;
        instanceIcon.src = instanceIconValue ?? blankImage;
    };

    form.addEventListener("submit", e => {
        callback(
            instanceName.value,
            instanceHost.value,
            instanceHostSecure.checked,
            instanceSoftware.value,
            instanceIcon.src == blankImage ? null : resize(instanceIcon)
        );
        form.reset();
    });

    const closeButton = form.querySelector(".close");
    if (!(closeButton instanceof HTMLButtonElement))
        throw new Error(".close isn't a button");

    closeButton.addEventListener("click", e => {
        instanceIcon.src = blankImage;
        hideInstanceDetailsDialog();
    });

    return {
        showInstanceDetailsDialog,
        hideInstanceDetailsDialog,
        populateInstanceDetailsDialog
    };
}