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

import {
  TemsInputField,
  type TemsInputFieldProps,
} from "@components/forms/ui/tems-input-field";

import ComponentStyle from "@styles/forms/searchbar/tems-defined-field.scss?inline";

export type TemsDefinedFieldProps = {
  pretabIcon?: TemplateResult;
  pretabLabel?: string | TemplateResult;
  posttabIcon?: TemplateResult;
} & TemsInputFieldProps;

@customElement("tems-defined-field")
export class TemsDefinedField extends TemsInputField {
  static styles = css`
    ${unsafeCSS(ComponentStyle)}
  `;

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

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

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

  defaultIcon = nothing;

  _renderPretab() {
    if (!this.pretabIcon && !this.pretabLabel) return nothing;
    return html`
      <tems-input-pretab
        .label=${this.pretabLabel || nothing}
        .icon=${this.pretabIcon || nothing}
        disabled=${this.disabled || nothing}
        size="sm"
        @click=${this._focusInput}
      ></tems-input-pretab>
    `;
  }

  _renderPosttab() {
    if (!this.posttabIcon) return nothing;
    return html`
      <tems-input-posttab
        .icon=${this.posttabIcon || nothing}
        disabled=${this.disabled || nothing}
        size="sm"
        @click=${this._focusInput}
      ></tems-input-posttab>
    `;
  }

  _focusInput() {
    if (this.field && !this.disabled) {
      this.field.focus();
    }
  }

  render() {
    return html`<label class="defined"
      >${this._renderPretab()}${this._renderInput()}${this._renderPosttab()}</label
    >`;
  }
}