import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { FormControl } from '@standard-forms/cdk';

@customElement('standard-forms-input')
export class InputComponent extends LitElement implements FormControl {

  @property({ type: Boolean }) disabled = false;
  @property({ type: String }) value = null;
  @property({ type: String }) name = '';
  @property({ type: String }) placeholder = '';

  getInput() {
    return this.shadowRoot?.querySelector('input');
  }

  valueChange: any = () => {
    const value = this.getInput()?.value;

    const options = {
      detail: value,
      bubbles: true,
      composed: true
    };

    this.dispatchEvent(new CustomEvent('valueChange', options));
  };

  focusChange: any = (focus: boolean) => {
    const event = new CustomEvent('focusChange', {
      detail: focus
    });

    this.dispatchEvent(event);
  }

  override connectedCallback() {
    super.connectedCallback()

    if (this.disabled) {
      this.getInput()?.setAttribute('disabled', '');
    } else {
      this.getInput()?.removeAttribute('disabled');
    }
  }

  override render() {
    return html`
      <style>
        :host {
          display: block;
          width: 100%;
        }
        input {
          width: 100%;
          box-sizing: border-box;
        }
        input:focus {
          outline: dashed red;
        }
      </style>

      <input
        id=${this.name}
        type='text'
        @input=${this.valueChange}
        value=${this.value}
        placeholder=${this.placeholder}
        @focus=${ () => this.focusChange(true) }
        @blur=${ () => this.focusChange(false) }
      />
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    "standard-forms-input": InputComponent;
  }
}