import { html, nothing } from 'lit';
import { property, state } from 'lit/decorators.js';
import { T as TailwindElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
import { c as customClassMap } from '../../chunks/index-BSaCYACP.js';
import '../lukso-form-description/index.js';
import '../lukso-form-error/index.js';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let LuksoCheckbox = class extends TailwindElement {
  constructor() {
    super(...arguments);
    this.name = "";
    this.id = "";
    this.ref = "";
    this.type = "text";
    this.size = "medium";
    this.label = "";
    this.description = "";
    this.error = "";
    this.checked = false;
    this.customClass = "";
    this.isReadonly = false;
    this.isDisabled = false;
    this.hasFocus = false;
    this.hasHighlight = false;
    this.defaultContainerStyles = `
        flex items-center gap-2
        select-none
    `;
    this.defaultInputStyles = `
        peer
        absolute
        top-0 left-0
        opacity-0
    `;
    this.defaultLabelStyles = `
    text-neutral-20 block
    `;
    this.defaultCheckboxStyles = `
    relative
    bg-neutral-100
    justify-center items-center flex
    border border-solid rounded-md
    outline-none transition transition-all duration-150 appearance-none shrink-0`;
  }
  checkedIconTemplate() {
    return html`
      <lukso-icon
        class=${customClassMap({
      hidden: !this.checked
    })}
        name="tick"
        color=${this.isDisabled ? "neutral-60" : "neutral-20"}
      ></lukso-icon>
    `;
  }
  checkboxTemplate() {
    return html`
      <div
        class=${customClassMap({
      [this.defaultCheckboxStyles]: true,
      [!this.error ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
      [!this.error ? "border-neutral-35" : "border-red-65"]: this.hasHighlight,
      "border-neutral-60": this.isDisabled,
      "h-10 w-[40px]": this.size === "medium",
      "h-[32px] w-[32px]": this.size === "small",
      "h-7 w-[28px]": this.size === "x-small",
      [this.customClass]: !!this.customClass
    })}
      >
        ${this.checkedIconTemplate()}
      </div>
    `;
  }
  inputTemplate() {
    const id = this.id || this.name;
    return html`
      <input
        name=${this.name}
        ?checked=${this.checked ? "checked" : void 0}
        type="checkbox"
        class=${customClassMap({
      [this.defaultInputStyles]: true,
      ["text-neutral-60"]: this.isDisabled
    })}
        ref=${this.ref}
        id=${id}
        data-testid=${this.name ? `input-${this.name}` : "input"}
        ?disabled=${this.isDisabled ? true : void 0}
        ?readonly=${this.isReadonly ? true : void 0}
        @change=${!this.isReadonly ? this.handleChange : "return false;"}
      />
    `;
  }
  labelTemplate() {
    return html`
      <span
        class=${customClassMap({
      [this.defaultLabelStyles]: true,
      "paragraph-inter-16-regular": this.size === "medium" || this.size === "small",
      "paragraph-inter-12-semi-bold": this.size === "x-small",
      "text-red-65": !!this.error,
      "text-neutral-60": this.isDisabled
    })}
      >
        <slot></slot>
      </span>
    `;
  }
  profileUsernameTemplate() {
    return html`
      <div class="flex items-center text-neutral-20 gap-2 justify-center">
        <slot></slot>
      </div>
    `;
  }
  render() {
    return html`
      <div>
        <lukso-form-label label=${this.label}></lukso-form-label>
        <lukso-form-description
          description=${this.description}
        ></lukso-form-description>
        <label
          for=${this.name}
          class=${customClassMap({
      [this.defaultContainerStyles]: true,
      ["cursor-not-allowed"]: this.isDisabled || this.isReadonly
    })}
          @mouseenter=${this.handleMouseOver}
          @mouseleave=${this.handleMouseOut}
        >
          ${this.inputTemplate()} ${this.checkboxTemplate()}
          ${this.type === "text" ? this.labelTemplate() : nothing}
          ${this.type === "profile" ? this.profileUsernameTemplate() : nothing}
        </label>
        <lukso-form-error error=${this.error}></lukso-form-error>
      </div>
    `;
  }
  async handleChange(event) {
    const target = event.target;
    this.checked = target.checked;
    await this.updateComplete;
    this.dispatchEvent(
      new CustomEvent("on-change", {
        detail: {
          value: target.value,
          checked: target.checked,
          event
        },
        bubbles: true,
        composed: true
      })
    );
  }
  handleMouseOver() {
    if (!this.isReadonly && !this.isDisabled) {
      this.hasHighlight = true;
    }
  }
  handleMouseOut() {
    if (!this.hasFocus) {
      this.hasHighlight = false;
    }
  }
};
__decorateClass([
  property({ type: String })
], LuksoCheckbox.prototype, "name", 2);
__decorateClass([
  property({ type: String })
], LuksoCheckbox.prototype, "id", 2);
__decorateClass([
  property({ type: String })
], LuksoCheckbox.prototype, "ref", 2);
__decorateClass([
  property({ type: String })
], LuksoCheckbox.prototype, "type", 2);
__decorateClass([
  property({ type: String })
], LuksoCheckbox.prototype, "size", 2);
__decorateClass([
  property({ type: String })
], LuksoCheckbox.prototype, "label", 2);
__decorateClass([
  property({ type: String })
], LuksoCheckbox.prototype, "description", 2);
__decorateClass([
  property({ type: String })
], LuksoCheckbox.prototype, "error", 2);
__decorateClass([
  property({ type: Boolean })
], LuksoCheckbox.prototype, "checked", 2);
__decorateClass([
  property({ type: String, attribute: "custom-class" })
], LuksoCheckbox.prototype, "customClass", 2);
__decorateClass([
  property({ type: Boolean, attribute: "is-readonly" })
], LuksoCheckbox.prototype, "isReadonly", 2);
__decorateClass([
  property({ type: Boolean, attribute: "is-disabled" })
], LuksoCheckbox.prototype, "isDisabled", 2);
__decorateClass([
  state()
], LuksoCheckbox.prototype, "hasFocus", 2);
__decorateClass([
  state()
], LuksoCheckbox.prototype, "hasHighlight", 2);
LuksoCheckbox = __decorateClass([
  safeCustomElement("lukso-checkbox")
], LuksoCheckbox);

export { LuksoCheckbox };
