import { a as TailwindElement, x, A } from '../../index-8c5a9941.js';
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
import { t } from '../../state-b9ca4e74.js';
import { c as customClassMap } from '../../index-5e194caf.js';
import '../../directive-2bb7789e.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 = void 0;
    this.type = "text";
    this.size = "medium";
    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`;
  }
  checkedIconTemplate() {
    return x`
      <lukso-icon
        class=${customClassMap({
      hidden: !this.checked
    })}
        name="tick"
        color=${this.isDisabled ? "neutral-60" : "neutral-20"}
      ></lukso-icon>
    `;
  }
  checkboxTemplate() {
    return x`
      <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-[40px] w-[40px]"]: this.size === "medium",
      ["h-[32px] w-[32px]"]: this.size === "small",
      ["h-[28px] w-[28px]"]: this.size === "x-small",
      [this.customClass]: !!this.customClass
    })}
      >
        ${this.checkedIconTemplate()}
      </div>
    `;
  }
  inputTemplate() {
    const id = this.id || this.name;
    return x`
      <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;"}
      />
    `;
  }
  errorTemplate() {
    return x`
      <div class="paragraph-inter-12-regular text-red-65 pt-2">
        ${this.error}
      </div>
    `;
  }
  labelTemplate() {
    return x`
      <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 x`
      <div class="flex items-center text-neutral-20 gap-2 justify-center">
        <slot></slot>
      </div>
    `;
  }
  render() {
    return x`
      <div>
        <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() : A}
          ${this.type === "profile" ? this.profileUsernameTemplate() : A}
        </label>
      </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([
  n({ type: String })
], LuksoCheckbox.prototype, "name", 2);
__decorateClass([
  n({ type: String })
], LuksoCheckbox.prototype, "id", 2);
__decorateClass([
  n({ type: String })
], LuksoCheckbox.prototype, "ref", 2);
__decorateClass([
  n({ type: String })
], LuksoCheckbox.prototype, "type", 2);
__decorateClass([
  n({ type: String })
], LuksoCheckbox.prototype, "size", 2);
__decorateClass([
  n({ type: String })
], LuksoCheckbox.prototype, "error", 2);
__decorateClass([
  n({ type: Boolean })
], LuksoCheckbox.prototype, "checked", 2);
__decorateClass([
  n({ type: String, attribute: "custom-class" })
], LuksoCheckbox.prototype, "customClass", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-readonly" })
], LuksoCheckbox.prototype, "isReadonly", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-disabled" })
], LuksoCheckbox.prototype, "isDisabled", 2);
__decorateClass([
  t()
], LuksoCheckbox.prototype, "hasFocus", 2);
__decorateClass([
  t()
], LuksoCheckbox.prototype, "hasHighlight", 2);
LuksoCheckbox = __decorateClass([
  e("lukso-checkbox")
], LuksoCheckbox);

export { LuksoCheckbox };
