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

import ToggleStyle from "@styles/forms/tems-toggle.scss?inline";

export type TemsToggleProps = {
  size: "sm" | "md";
  value?: string;
  checked: boolean;
  disabled: boolean;
  field: Element;
};

@customElement("tems-toggle")
export class TemsToggle extends LitElement {
  static styles = css`
    ${unsafeCSS(ToggleStyle)}
  `;

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

  @property({ attribute: "size", type: String, reflect: true })
  size: TemsToggleProps["size"] = "sm";

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

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

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

  _getSizeClasses() {
    const allowedSizes = ["sm", "md"];
    if (this.size && !allowedSizes.includes(this.size)) {
      this.size = "sm";
    }
    return this.size;
  }

  _updateToggleState(e: Event) {
    e.preventDefault();
    if (!this.disabled) {
      this.checked = !this.checked;
      this.value = String(this.checked);

      this.dispatchEvent(
        new CustomEvent("change", {
          detail: {
            value: this.checked,
            checked: e.target?.checked,
          },
        }),
      );
    }
  }

  protected updated() {
    if (this.value === "true") {
      this.checked = true;
    }
    this.field.setAttribute("type", "checkbox");
    if (this.name) {
      this.field.setAttribute("name", this.name);
    } else {
      this.field.removeAttribute("name");
    }
    if (this.value) {
      this.field.setAttribute("value", this.value);
    } else {
      this.field.removeAttribute("value");
    }
    if (this.checked) {
      this.field.setAttribute("checked", "true");
    } else {
      this.field.removeAttribute("checked");
    }
    if (this.disabled) {
      this.field.setAttribute("disabled", "true");
    } else {
      this.field.removeAttribute("disabled");
    }
  }

  render() {
    return html`
      <label
        class="${this.size} switch"
        @click=${this._updateToggleState.bind(this)}
        disabled=${this.disabled || nothing}
      >
        ${this.field}
        <span class="slider"></span>
      </label>
    `;
  }
}