import { IgniteHtml } from '../ignite-html/ignite-html.js';
import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, button, ul, slot, span, div } 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")
            .attribute("tabindex", "0")
            .child(
                new div()
                    .class("form-control form-control-lg")
                    .innerHTML(this.value)
                    .attribute("contenteditable", true)
                    .data("placeholder", this.placeholder)
                    .ref(this.inputElement),

                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
}