import { selector } from "./selector.js";
import { selector_item } from "./selector-item.js"
import { container } from "interface/container.js";
import { image } from "interface/image.js";
import { text } from "interface/text.js";
import { image_icon } from "interface/image-icon.js";

class full_screen_selector extends selector {
    #option(item) {
        const space = new container("selector-item");
        const miniature = new image_icon(item.icon);
        const title = new text(item.title);

        space.append(miniature);
        space.append(title);
        space.add_click(() => { item.action(); });

        return space;
    }

    show() {
        this._clean();
       
        let name = "full-screen-selector";

        if (this.has_name) {
            name = this.name;
        }

        const target = new container(name);

        this.items.forEach((item) => {
            target.append(this.#option(item));
        });

        this.app.appendChild(target.node);
    }
}

export { full_screen_selector };