// retoor <retoor@molodetz.nl>

export class WarComposer {
    constructor() {
        document.addEventListener("click", (event) => this.onClick(event));
        document.addEventListener("submit", (event) => this.onSubmit(event), true);
    }

    onClick(event) {
        const toggle = event.target.closest("[data-war-toggle]");
        if (toggle) {
            event.preventDefault();
            this.toggleBuilder(toggle);
            return;
        }
        const pollToggle = event.target.closest("[data-poll-toggle]");
        if (pollToggle) {
            this.closeWhenPollOpens(pollToggle);
        }
    }

    toggleBuilder(toggle) {
        const form = toggle.closest("form");
        const builder = form ? form.querySelector("[data-war-builder]") : null;
        if (!builder) {
            return;
        }
        const activating = builder.hidden;
        if (activating) {
            this.closePollBuilder(form);
        }
        builder.hidden = !activating;
        this.setWarEnabled(builder, activating);
        const label = toggle.querySelector("[data-war-toggle-label]");
        if (label) {
            label.textContent = activating ? "Remove Opinion War" : "Start Opinion War";
        }
    }

    closePollBuilder(form) {
        const pollBuilder = form.querySelector("[data-poll-builder]");
        const pollToggle = form.querySelector("[data-poll-toggle]");
        if (pollBuilder && pollToggle && !pollBuilder.hidden) {
            pollToggle.click();
        }
    }

    closeWhenPollOpens(pollToggle) {
        const form = pollToggle.closest("form");
        const builder = form ? form.querySelector("[data-war-builder]") : null;
        const toggle = form ? form.querySelector("[data-war-toggle]") : null;
        if (!builder || !toggle || builder.hidden) {
            return;
        }
        builder.hidden = true;
        this.setWarEnabled(builder, false);
        const label = toggle.querySelector("[data-war-toggle-label]");
        if (label) {
            label.textContent = "Start Opinion War";
        }
    }

    setWarEnabled(builder, enabled) {
        builder.querySelectorAll("input[name='war_faction_a'], input[name='war_faction_b']").forEach((input) => {
            input.disabled = !enabled;
            if (!enabled) {
                input.value = "";
            }
        });
        const error = builder.querySelector("[data-war-error]");
        if (error) {
            error.hidden = true;
            error.textContent = "";
        }
    }

    onSubmit(event) {
        const form = event.target;
        if (!form || typeof form.querySelector !== "function") {
            return;
        }
        const builder = form.querySelector("[data-war-builder]");
        if (!builder || builder.hidden) {
            return;
        }
        const factionA = form.querySelector("input[name='war_faction_a']");
        const factionB = form.querySelector("input[name='war_faction_b']");
        const nameA = factionA ? factionA.value.trim() : "";
        const nameB = factionB ? factionB.value.trim() : "";
        let problem = "";
        if (!nameA || !nameB) {
            problem = "Name both factions, or remove the Opinion War.";
        } else if (nameA.toLowerCase() === nameB.toLowerCase()) {
            problem = "The two factions need different names.";
        }
        if (problem) {
            event.preventDefault();
            event.stopImmediatePropagation();
            const error = builder.querySelector("[data-war-error]");
            if (error) {
                error.textContent = problem;
                error.hidden = false;
            }
        }
    }
}
