import { LitElement, html, css } from "lit";
import { customElement, property, query } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import "./icon.ts";

@customElement("hvs-input")
export default class HvsInput extends LitElement {
  @property({ attribute: "is-loading", type: Boolean })
  isLoading = false;

  @property({ attribute: false, type: String })
  value?: string = "";

  @property({ attribute: false })
  onChange: (value: string) => void = () => {};

  @property({ attribute: false, type: String })
  searchIcon?: string = "";

  @property({ attribute: false, type: String })
  placeholder?: string = "";

  @query("#hvs-input")
  input!: HTMLInputElement;

  constructor() {
    super();
    this.addEventListener("input", () => {
      this.onChange(this.input.value);
    });
  }

  protected render() {
    return html`
      <div>
        <input
          id="hvs-input"
          .value=${this.value ?? ""}
          placeholder=${ifDefined(this.placeholder)}
        />
        <hvs-input-icon
          ?is-loading=${this.isLoading}
          .searchIcon=${this.searchIcon}
        ></hvs-input-icon>
      </div>
    `;
  }

  static styles = css`
    div {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
    }

    input {
      font-family: var(--hvs-font-family, inherit);
      box-sizing: border-box;

      padding-top: var(--hvs-input-padding-top, 8px);
      padding-bottom: var(--hvs-input-padding-bottom, 8px);
      padding-left: var(--hvs-input-padding-left, 12px);
      padding-right: var(--hvs-input-padding-right, 32px);

      border: none;

      border-top-left-radius: var(--hvs-input-border-top-left-radius, 8px);
      border-top-right-radius: var(--hvs-input-border-top-right-radius, 8px);
      border-bottom-left-radius: var(
        --hvs-input-border-bottom-left-radius,
        8px
      );
      border-bottom-right-radius: var(
        --hvs-input-border-bottom-right-radius,
        8px
      );

      border-top: var(--hvs-input-border-top);
      border-right: var(--hvs-input-border-right);
      border-bottom: var(--hvs-input-border-bottom);
      border-left: var(--hvs-input-border-left);
      border-color: var(--hvs-input-border-color, #d0d5dd);
      border-width: var(--hvs-input-border-width, 1px);
      border-style: var(--hvs-input-border-style, solid);

      width: 100%;
      min-width: 100%;
      height: var(--hvs-input-height, 40px);

      font-style: normal;
      font-weight: 400;
      font-size: var(--hvs-input-font-size, 16px);
      line-height: var(--hvs-input-line-height, 24px);

      background: var(--hvs-input-background, transparent);
      color: var(--hvs-input-text-color, #667085);
    }
    input:focus-visible {
      outline: var(--hvs-input-ring-color, #98a2b3 auto 1px);
    }
  `;
}

declare global {
  interface HTMLElementTagNameMap {
    "hvs-input": HvsInput;
  }
}