import { view } from "./view.js";
import { cx_ui } from "./cx-ui.js";
import { dictionary } from "./dictionary.js";
import { shelf } from "./shelf.js";
import { space } from "./space.js";

export class selector extends view {
    #shelf() {
        this.manager.view = shelf;
    }

    #space() {
        this.manager.view = space;
    }

    show() {
        const lang = new dictionary();
        const container = cx_ui.div("selector");
        const shelf = cx_ui.div("shelf");
        const space = cx_ui.div("space");

        const shelf_icon = cx_ui.image(
            "shelf-image", 
            "./static/icons/shelf.svg", 
            () => { this.#shelf(); }
        );

        const space_icon = cx_ui.image(
            "space-icon",
            "./static/icons/space.svg",
            () => { this.#space(); }
        );

        const shelf_title = cx_ui.p("shelf-title", lang.get("selector.shelf"));
        const space_title = cx_ui.p("space-title", lang.get("selector.space"));

        shelf.appendChild(shelf_icon);
        shelf.appendChild(shelf_title);
        
        space.appendChild(space_icon);
        space.appendChild(space_title);

        container.appendChild(shelf);
        container.appendChild(space);

        return container;
    }
}