import { IgniteHtml } from '../ignite-html/ignite-html.js';
import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, button, ul, slot, span, div, html, converter } from "../ignite-html/ignite-template.js";
import { IgniteProperty } from "../ignite-html/ignite-html.js";
import { Popper } from "./popper.js";

class SearchSelect extends IgniteElement {
    constructor() {
        super();
    }

    get styles() {
        return /*css*/`
            mt-search-select>div:empty:before {
                content: attr(data-placeholder);
                opacity: 0.5;
            }
        `;
    }

    get properties() {
        return {
            inputElement: null,
            placeholder: null,
            options: null,
            optionsRenderer: null,
            value: null,
            search: null
        };
    }

    render() {
        return this.template
            .class("w-100 position-relative form-control form-control-lg d-flex flex-row")
            .attribute("tabindex", "0")
            .child(
                new div()
                    .style("flex", 1)
                    .style("border", "none")
                    .style("outline", "none")
                    .style("overflow", "auto")
                    .attribute("contenteditable", true)
                    .ref(this.inputElement),

                new div().child(
                    new converter(this.value, this.optionsRenderer)
                ),

                new button().class("btn btn-none").child("<i class='fa-solid fa-times' />"),

                new Popper().class("form-control form-control-lg shadow").property("show", true).child(
                    "Test"
                )
            );
    }
}

class Template extends IgniteTemplate {
    constructor(...children) {
        super("mt-search-select", children);
    }
}

IgniteHtml.register("mt-search-select", SearchSelect);

export {
    Template as SearchSelect
}