import { safeCustomElement } from "../../shared/safe-custom-element.js";
import { TailwindElement } from "../../shared/tailwind-element/index.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import "../lukso-sanitize/index.js";
import "../lukso-form-description/index.js";
import "../lukso-form-error/index.js";
import "../lukso-form-label/index.js";
import { uniqId } from "../../shared/tools/uniq-id.js";
import { html } from "lit";
import { property } from "lit/decorators.js";
import { tv } from "tailwind-variants";
import { styleMap } from "lit/directives/style-map.js";
//#region src/components/lukso-switch/index.ts
var DEFAULT_COLOR = "green-54";
var LuksoSwitch = class LuksoSwitch extends TailwindElement {
	async handleChange(event) {
		const target = event.target;
		await this.updateComplete;
		const changeEvent = new CustomEvent("on-change", {
			detail: {
				value: target.checked,
				event
			},
			bubbles: false,
			composed: true
		});
		this.dispatchEvent(changeEvent);
	}
	constructor() {
		super();
		this.color = DEFAULT_COLOR;
		this.id = "";
		this.name = "switch";
		this.label = "";
		this.description = "";
		this.error = "";
		this.isChecked = false;
		this.isDisabled = false;
		this.styles = tv({
			slots: {
				label: "transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10",
				input: "absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in"
			},
			variants: {
				isChecked: {
					true: { input: "translate-x-4" },
					false: {
						label: "bg-neutral-90",
						input: "border-neutral-90"
					}
				},
				isDisabled: {
					true: {
						label: "opacity-70 cursor-not-allowed",
						input: "cursor-not-allowed"
					},
					false: {
						label: "cursor-pointer",
						input: "cursor-pointer"
					}
				},
				hasError: { true: {
					label: "!bg-red-65",
					input: "!border-red-65"
				} }
			}
		});
		if (!this.id) this.id = `switch-${uniqId()}`;
	}
	render() {
		const { label, input } = this.styles({
			isChecked: this.isChecked,
			isDisabled: this.isDisabled,
			hasError: !!this.error
		});
		if (!this.color) this.color = DEFAULT_COLOR;
		return html`
      <div>
        <lukso-form-label
          for-name=${this.name}
          label=${this.label}
        ></lukso-form-label>
        <lukso-form-description
          description=${this.description}
        ></lukso-form-description>
        <label for=${this.id} class="w-[inherit]">
          <div class="flex">
            <div
              class=${label()}
              style=${styleMap({ backgroundColor: `var(--${this.isChecked ? this.color : "neutral-90"})` })}
            >
              <input
                type="checkbox"
                id=${this.id}
                name=${this.name}
                ?checked=${this.isChecked}
                ?disabled=${this.isDisabled}
                class=${input()}
                style=${styleMap({ borderColor: `var(--${this.isChecked ? this.color : "neutral-90"})` })}
                @change=${this.handleChange}
              />
            </div>
          </div>
        </label>
        <lukso-form-error error=${this.error}></lukso-form-error>
      </div>
    `;
	}
};
__decorate([property({ type: String })], LuksoSwitch.prototype, "color", void 0);
__decorate([property({ type: String })], LuksoSwitch.prototype, "id", void 0);
__decorate([property({ type: String })], LuksoSwitch.prototype, "name", void 0);
__decorate([property({ type: String })], LuksoSwitch.prototype, "label", void 0);
__decorate([property({ type: String })], LuksoSwitch.prototype, "description", void 0);
__decorate([property({ type: String })], LuksoSwitch.prototype, "error", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-checked"
})], LuksoSwitch.prototype, "isChecked", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-disabled"
})], LuksoSwitch.prototype, "isDisabled", void 0);
LuksoSwitch = __decorate([safeCustomElement("lukso-switch")], LuksoSwitch);
//#endregion
export { LuksoSwitch };
