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

class SimpleGreeting extends LitElement {
    constructor() {
        super();
        this.model = {
            currentThing: 'optionA',
            things: [ 'optionA', 'optionB' ]
        };
    }

    onSelect(e) {
        this.model.currentThing = e.target.value;
        this.render();
    }

    render(){
        return html`<select @change=${e => this.onSelect(e)}>
                        ${this.model.things.map(thing =>
                            html`<option value="${thing}">${thing}</option>` )}
                    </select>
                    <div>
                        ${this.displaySelected()}
                    </div>`;
    }

    displaySelected() {
        switch(this.model.currentThing) {
            case 'optionA': return html`<span>A_A_A_A_A_A</span>`;
            case 'optionB': return html`<span>B_B_B_B_B_B</span>`;
        }
    }
}

customElements.define('simple-greeting', SimpleGreeting);