// retoor <retoor@molodetz.nl>

export class ModalManager {
    constructor() {
        this.initPasswordToggles();
        this.initModals();
        this.initConfirmations();
    }

    initPasswordToggles() {
        document.querySelectorAll(".auth-toggle-pw").forEach((btn) => {
            btn.addEventListener("click", () => {
                const input = btn.parentElement.querySelector("input");
                if (!input) {
                    return;
                }
                const type = input.type === "password" ? "text" : "password";
                input.type = type;
                btn.textContent = type === "password" ? "\u{1F441}" : "\u{1F648}";
            });
        });
    }

    initModals() {
        document.querySelectorAll("[data-modal]").forEach((trigger) => {
            trigger.addEventListener("click", (e) => {
                e.preventDefault();
                const modalId = trigger.dataset.modal;
                const modal = document.getElementById(modalId);
                if (modal) {
                    modal.classList.add("visible");
                }
            });
        });

        document.querySelectorAll(".modal-overlay").forEach((modal) => {
            modal.addEventListener("click", (e) => {
                if (e.target === modal) {
                    modal.classList.remove("visible");
                }
            });
            modal.querySelectorAll(".modal-close").forEach((closeBtn) => {
                closeBtn.addEventListener("click", () => {
                    modal.classList.remove("visible");
                });
            });
        });
    }

    initConfirmations() {
        document.addEventListener("click", (e) => {
            const el = e.target.closest("[data-confirm]");
            if (!el) return;
            if (el.dataset.confirmed === "1") {
                delete el.dataset.confirmed;
                return;
            }
            e.preventDefault();
            e.stopImmediatePropagation();
            const proceed = () => {
                el.dataset.confirmed = "1";
                el.click();
            };
            const dialog = window.app && window.app.dialog;
            if (!dialog) {
                if (confirm(el.dataset.confirm)) proceed();
                return;
            }
            dialog.confirm({
                message: el.dataset.confirm,
                title: el.dataset.confirmTitle || "Please confirm",
                confirmLabel: el.dataset.confirmLabel,
                danger: el.dataset.confirmDanger !== undefined,
            }).then((ok) => {
                if (ok) proceed();
            });
        }, true);
    }
}
