import { css, customElement, html, LitElement, property } from 'lit-element';


/**
 * An example element.
 *
 * @slot - This element has a slot
 * @csspart button - The button
 */
@customElement('ms-autocomplete')
export class MSAutocomplete extends LitElement {
    static styles = css`
        :host {
            display: block;
            border: solid 1px gray;
            padding: 16px;
            max-width: 800px;
        }
    `;

    @property({ type: String }) model = 'test';
    @property({ type: Array }) data = [];

    constructor() {
        super()
    }

    onchangeHandler(e: any) {
        this.model = e.target.value
    }

    render() {
        console.log(this.data);

        return html`
            <input list="ms-orass-ui-datalist" value=${this.model} @change=${(e: any) => this.model = e.target.value}>
            <datalist id="ms-orass-ui-datalist">
                ${(this.data || []).map((item: any) => html`<option value="${item.label}">`)}
            </datalist>
        `;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'ms-autocomplete': MSAutocomplete;
    }
}