// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=86-2920&m=dev
import {
  LitElement,
  type TemplateResult,
  css,
  html,
  nothing,
  unsafeCSS,
} from "lit";
import { customElement, property } from "lit/decorators.js";

import "~icons/mingcute/search-3-line";

import type { TemsDefinedFieldProps } from "@components/forms/searchbar/tems-defined-field";
import type { TemsLabelProps } from "@components/forms/ui/tems-label";

import ComponentStyle from "@styles/forms/tems-input.scss?inline";

export type TemsInputProps = {
  type?: TemsDefinedFieldProps["type"];
  value?: TemsDefinedFieldProps["value"];
  placeholder?: TemsDefinedFieldProps["label"];
  icon?: TemsDefinedFieldProps["icon"];
  status: TemsDefinedFieldProps["status"];
  disabled?: TemsDefinedFieldProps["disabled"];
  pretabIcon?: TemsDefinedFieldProps["pretabIcon"];
  pretabLabel?: TemsDefinedFieldProps["pretabLabel"];
  posttabIcon?: TemsDefinedFieldProps["posttabIcon"];
  label?: TemsLabelProps["label"];
  info?: TemsLabelProps["info"];
  optional?: TemsLabelProps["optional"];
  required?: TemsLabelProps["required"];
  hint?: string;
};

@customElement("tems-input")
export class TemsInput extends LitElement {
  static styles = css`
    ${unsafeCSS(ComponentStyle)}
  `;

  @property({ attribute: "type", type: String, reflect: true })
  type: TemsInputProps["type"] = "search";

  @property({ attribute: "value", type: String, reflect: true })
  value: TemsInputProps["value"];

  @property({ attribute: "placeholder", type: String, reflect: true })
  placeholder: TemsInputProps["placeholder"];

  @property({ attribute: false })
  icon: TemsInputProps["icon"];

  @property({ attribute: "status", type: String, reflect: true })
  status: TemsInputProps["status"] = undefined;

  @property({ attribute: "disabled", type: Boolean, reflect: true })
  disabled: TemsInputProps["disabled"];

  @property({ attribute: false })
  pretabIcon: TemsInputProps["pretabIcon"];

  @property({ attribute: false })
  pretabLabel: TemsInputProps["pretabLabel"];

  @property({ attribute: false })
  posttabIcon: TemsInputProps["posttabIcon"];

  @property({ attribute: "label", type: String, reflect: true })
  label: TemsInputProps["label"];

  @property({ attribute: "info", type: String, reflect: true })
  info: TemsInputProps["info"];

  @property({ attribute: "optional" })
  optional: TemsInputProps["optional"];

  @property({ attribute: "required", type: Boolean, reflect: true })
  required: TemsInputProps["required"] = false;

  @property({ attribute: "hint", type: String, reflect: true })
  hint: TemsInputProps["hint"];

  defaultSearchIcon: TemplateResult | symbol = html`<span
    ><icon-mingcute-search-3-line></icon-mingcute-search-3-line
  ></span>`;

  _handleChange(e: Event) {
    e.preventDefault();
    this.value = e.detail.value;
    this.dispatchEvent(
      new CustomEvent("change", {
        detail: {
          value: this.value,
        },
      }),
    );
  }

  _getType() {
    if (this.type?.startsWith("search-")) {
      return this.type.replace("search-", "");
    }

    if (this.type === "search") {
      return "text";
    }

    return this.type;
  }

  _renderSearchInput() {
    return html`<tems-input-field
      type=${this._getType()}
      label=${this.placeholder || nothing}
      .icon=${this.icon || this.defaultSearchIcon}
      size="md"
      disabled=${this.disabled || nothing}
      status=${this.status || nothing}
      value=${this.value || ""}
      @change=${this._handleChange}
    ></tems-input-field>`;
  }

  _renderDefinedInput() {
    return html`<tems-defined-field
      type=${this._getType()}
      label=${this.placeholder || nothing}
      disabled=${this.disabled || nothing}
      status=${this.status || nothing}
      value=${this.value || nothing}
      .pretabLabel=${this.pretabLabel || nothing}
      .pretabIcon=${this.pretabIcon || nothing}
      .posttabIcon=${this.posttabIcon || nothing}
      @change=${this._handleChange}
    ></tems-defined-field>`;
  }

  _renderLabel() {
    if (!this.label) return nothing;
    return html`<tems-label
      label=${this.label || nothing}
      info=${this.info || nothing}
      optional=${this.optional || nothing}
      required=${this.required || nothing}
    ></tems-label>`;
  }

  render() {
    return html`<div class="input">
      ${this._renderLabel()}${
        this.type?.startsWith("search-") || this.type === "search"
          ? this._renderSearchInput()
          : this._renderDefinedInput()
      }${this.hint ? html`<span class="hint">${this.hint}</span>` : nothing}
    </div>`;
  }
}