// retoor <retoor@molodetz.nl>

export class ProfileEditor {
    constructor() {
        this.initProfileEdit();
        this.initPlatformTags();
    }

    initProfileEdit() {
        document.querySelectorAll("[data-edit-field]").forEach((btn) => {
            btn.addEventListener("click", () => {
                const field = btn.dataset.editField;
                const display = document.getElementById(`display-${field}`);
                const input = document.getElementById(`input-${field}`);
                if (!display || !input) {
                    return;
                }
                display.classList.toggle("hidden");
                input.classList.toggle("hidden");
                if (!input.classList.contains("hidden")) {
                    input.focus();
                }
            });
        });
    }

    initPlatformTags() {
        const platformsInput = document.getElementById("platforms-input");
        const hiddenInput = document.getElementById("platforms");
        const tagsContainer = document.getElementById("platforms-tags");
        if (!platformsInput || !hiddenInput || !tagsContainer) return;

        const addPlatform = (val) => {
            val = val.trim();
            if (!val) return;
            const tag = document.createElement("span");
            tag.className = "platform-tag";
            tag.textContent = val;
            tag.dataset.value = val;
            const remove = document.createElement("button");
            remove.type = "button";
            remove.textContent = "x";
            remove.style.marginLeft = "4px";
            remove.style.fontSize = "0.75rem";
            remove.style.padding = "0";
            remove.style.background = "none";
            remove.style.border = "none";
            remove.style.color = "inherit";
            remove.style.cursor = "pointer";
            remove.addEventListener("click", () => {
                tag.remove();
                updatePlatforms();
            });
            tag.appendChild(remove);
            tagsContainer.appendChild(tag);
            platformsInput.value = "";
            updatePlatforms();
        };

        const updatePlatforms = () => {
            const values = [];
            tagsContainer.querySelectorAll(".platform-tag").forEach((t) => {
                values.push(t.dataset.value);
            });
            hiddenInput.value = values.join(",");
        };

        const seeded = hiddenInput.value;
        hiddenInput.value = "";
        seeded
            .split(",")
            .map((value) => value.trim())
            .filter(Boolean)
            .forEach(addPlatform);

        platformsInput.addEventListener("keydown", (e) => {
            if (e.key === "Enter") {
                e.preventDefault();
                addPlatform(platformsInput.value);
            }
        });

        document.querySelectorAll(".platform-preset").forEach((btn) => {
            btn.addEventListener("click", () => {
                addPlatform(btn.dataset.platform);
            });
        });
    }
}