/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */

import type * as globalTypes from "../types/globalTypes";

import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types";
import type { BulmaJS } from "@cityssm/bulma-js/types";

declare const cityssm: cityssmGlobal;
declare const bulmaJS: BulmaJS;

(() => {
    const los = exports.los as globalTypes.LOS;

    const mapId = (document.querySelector("#map--mapId") as HTMLInputElement).value;
    const isCreate = mapId === "";

    const mapForm = document.querySelector("#form--map") as HTMLFormElement;

    function updateMap(formEvent: SubmitEvent) {
        formEvent.preventDefault();

        cityssm.postJSON(
            los.urlPrefix + "/maps/" + (isCreate ? "doCreateMap" : "doUpdateMap"),
            mapForm,
            (responseJSON: { success: boolean; mapId?: number; errorMessage?: string }) => {
                if (responseJSON.success) {
                    cityssm.disableNavBlocker();

                    if (isCreate) {
                        window.location.href = los.urlPrefix + "/maps/" + responseJSON.mapId + "/edit";
                    } else {
                        bulmaJS.alert({
                            message: exports.aliases.map + " Updated Successfully",
                            contextualColorName: "success"
                        });
                    }
                } else {
                    bulmaJS.alert({
                        title: "Error Updating " + exports.aliases.map,
                        message: responseJSON.errorMessage || "",
                        contextualColorName: "danger"
                    });
                }
            }
        );
    }

    mapForm.addEventListener("submit", updateMap);

    const inputElements = mapForm.querySelectorAll("input, select") as NodeListOf<
        HTMLInputElement | HTMLSelectElement
    >;

    for (const inputElement of inputElements) {
        inputElement.addEventListener("change", cityssm.enableNavBlocker);
    }

    document.querySelector("#button--deleteMap")?.addEventListener("click", (clickEvent) => {
        clickEvent.preventDefault();

        function doDelete() {
            cityssm.postJSON(
                los.urlPrefix + "/maps/doDeleteMap",
                {
                    mapId
                },
                (responseJSON: { success: boolean; errorMessage?: string }) => {
                    if (responseJSON.success) {
                        window.location.href = los.urlPrefix + "/maps?t=" + Date.now();
                    } else {
                        bulmaJS.alert({
                            title: "Error Deleting " + exports.aliases.map,
                            message: responseJSON.errorMessage || "",
                            contextualColorName: "danger"
                        });
                    }
                }
            );
        }

        bulmaJS.confirm({
            title: "Delete " + exports.aliases.map,
            message: `Are you sure you want to delete this ${exports.aliases.map.toLowerCase()} and all related ${exports.aliases.lots.toLowerCase()}?`,
            contextualColorName: "warning",
            okButton: {
                text: `Yes, Delete ${exports.aliases.map}`,
                callbackFunction: doDelete
            }
        });
    });
})();