// V09 wraps the legacy Svelte SettingsView and filters its big page
// down to a single rail section so each rail item shows only the
// relevant controls. The Svelte component is left untouched (it is
// shared with the legacy UI) — we just hide the `<h2>` and `<fieldset>`
// elements whose `data-sec` does not match the active section.

module.exports = {
    template: "#settings-view-template",

    props: {
        // "display" | "probing" | "gcode". Default is "display" which
        // keeps the rail's "Display & Units" item working unchanged.
        section: { default: "display" },
    },

    attached: function () {
        this.svelteComponent = SvelteComponents.createComponent(
            "SettingsView",
            document.getElementById("settings")
        );
        // Defer one tick so Svelte has rendered the section markup.
        setTimeout(() => this.apply_section_filter(), 0);
    },

    detached: function () {
        if (this.svelteComponent) this.svelteComponent.$destroy();
    },

    watch: {
        section: function () {
            this.apply_section_filter();
        },
    },

    methods: {
        apply_section_filter: function () {
            const root = document.getElementById("settings");
            if (!root) return;
            const want = this.section || "display";
            // Hide every section block that does not match.
            root.querySelectorAll("[data-sec]").forEach(el => {
                el.style.display = el.dataset.sec === want ? "" : "none";
            });
            // Hide the global <h1>Settings</h1> on subsections so the
            // page reads as a focused panel.
            const h1 = root.querySelector(".settings-view > h1");
            if (h1) {
                if (want === "display") {
                    h1.textContent = "Display & Units";
                } else if (want === "probing") {
                    h1.textContent = "Probing";
                } else if (want === "gcode") {
                    h1.textContent = "G-code & Motion";
                } else {
                    h1.textContent = "Settings";
                }
            }
        },
    },
};