import { LitElement, html, css } from 'lit';

export class GrainInput extends LitElement {
  static properties = {
    type: { type: String },
    placeholder: { type: String },
    value: { type: String },
    clearable: { type: Boolean }
  };

  static styles = css`
    :host {
      display: block;
    }
    .wrapper {
      position: relative;
    }
    input {
      width: 100%;
      padding: var(--space-sm);
      border: 1px solid var(--color-border);
      border-radius: 6px;
      background: var(--color-bg-primary);
      color: var(--color-text-primary);
      font-size: var(--font-size-sm);
      font-family: inherit;
      box-sizing: border-box;
    }
    :host([clearable]) input {
      padding-right: 36px;
    }
    input::placeholder {
      color: var(--color-text-secondary);
    }
    input:focus {
      outline: none;
      border-color: var(--color-text-secondary);
    }
    .clear-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--color-text-secondary);
      cursor: pointer;
      padding: 4px;
      font-size: 16px;
      line-height: 1;
    }
  `;

  constructor() {
    super();
    this.type = 'text';
    this.placeholder = '';
    this.value = '';
    this.clearable = false;
  }

  #handleInput(e) {
    this.value = e.target.value;
    this.dispatchEvent(new CustomEvent('input', {
      detail: { value: this.value },
      bubbles: true,
      composed: true
    }));
  }

  #handleClear() {
    this.value = '';
    this.dispatchEvent(new CustomEvent('input', {
      detail: { value: '' },
      bubbles: true,
      composed: true
    }));
    this.dispatchEvent(new CustomEvent('clear', {
      bubbles: true,
      composed: true
    }));
  }

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

  render() {
    return html`
      <div class="wrapper">
        <input
          type=${this.type}
          placeholder=${this.placeholder}
          .value=${this.value}
          @input=${this.#handleInput}
        >
        ${this.clearable && this.value ? html`
          <button class="clear-btn" @click=${this.#handleClear}>&times;</button>
        ` : ''}
      </div>
    `;
  }
}

customElements.define('grain-input', GrainInput);