import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('iu-input')

export class Input extends LitElement {
    static override styles = css`
        :host {
            display: block;
        }
        .input-group{
            margin-bottom: var(--iu-spacing-4);
        }
        label {
            font-weight: bold;
            display: block;
            margin-bottom: var(--iu-spacing-0);
        }
        .input{
            border-top: 1px solid var(--iu-color-grey-200);
            border-bottom: 1px solid var(--iu-color-grey-200);
        }
        .input:has(+ .helper){
            margin-bottom: var(--iu-spacing-0);
        }
        .helper{
            font: var(--iu-f-0);
            color: var(--iu-color-grey-500);
        }
        input {
            width: 100%;
            height: 2.25rem;
            padding: 8px 0;
            font-size: 1rem;
            border: 0;
            color: var(--iu-color-grey-300);
            box-sizing: border-box;
        }
        input::placeholder{
            color: var(--iu-color-grey-300);
        }
        .input:has(input:focus) {
            border-top: 1px solid var(--iu-color-black);
            border-bottom: 1px solid var(--iu-color-black);
        }
        input:focus{
            outline: 0;
        }
    `;

    @property({ type: String }) label = '';
    @property({ type: String }) type = 'text';
    @property({ type: String }) name = '';
    @property({ type: String }) placeholder = '';
    @property({ type: String }) value = '';
    @property({ type: String }) helper? : string;

    private handleInput(event: Event) {
        const target = event.target as HTMLInputElement;
        this.value = target.value;
        this.dispatchEvent(new CustomEvent('input-change', {
            detail: { name: this.name, value: this.value },
            bubbles: true,
            composed: true
        }));
    }

    override render() {
        return html`
            <div class="input-group">
                <label for="${this.name}">${this.label}</label>
                <div class="input">
                    <input
                        type="${this.type}"
                        name="${this.name}"
                        placeholder="${this.placeholder}"
                        .value="${this.value}"
                        @input="${this.handleInput}"
                    />
                </div>
                ${this.helper && html`<span class="helper">${this.helper}</span>`}
            </div>
        `;
    }
}

declare global {
    interface HTMLElementTagNameMap {
      'iu-input': Input;
    }
}