// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=1235-8381&m=dev
import { 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 type { TemsLabelProps } from "@components/forms/ui/tems-label";

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

export type TemsTextareaProps = TemsInputFieldProps & {
  placeholder?: TemsInputFieldProps["label"];
  rows?: number;
  label?: TemsLabelProps["label"];
  info?: TemsLabelProps["info"];
  optional?: TemsLabelProps["optional"];
  required?: TemsLabelProps["required"];
  hint?: string;
};

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

  @property({ type: Element })
  field: TemsInputFieldProps["field"] = document.createElement("textarea");

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

  @property({ attribute: "rows", type: Number, reflect: true })
  rows: TemsTextareaProps["rows"] = 3;

  @property({ attribute: false })
  value: TemsTextareaProps["value"];

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

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

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

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

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

  _adaptFieldOnUpdate() {
    if (this.placeholder) {
      this.field.setAttribute("placeholder", this.placeholder);
    } else {
      this.field.removeAttribute("placeholder");
    }
    if (this.rows) {
      this.field.setAttribute("rows", String(this.rows));
    } else {
      this.field.removeAttribute("rows");
    }
  }

  protected firstUpdated() {
    this.field.addEventListener("input", this._updateInputValue.bind(this));
  }

  _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>`;
  }

  _renderInput() {
    return html`<label class="md">${this.field}</label>`;
  }

  render() {
    return html`<div class="input">
      ${this._renderLabel()}${
        this.hint ? html`<span class="hint">${this.hint}</span>` : nothing
      }${this._renderInput()}
    </div>`;
  }
}