var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
import { ReadyMixin } from '../../util/ReadyMixin.js';
import '../icon/Icon.js';
// 'sm' is omitted — it uses the base btu-switch dimensions with no modifier class
const SIZE_CLASSES = {
    md: 'btu-switch-md',
    lg: 'btu-switch-lg',
};
/**
 * A toggle switch component for binary on/off states.
 *
 * Uses a hidden checkbox internally for accessibility, styled via the
 * `btu-switch` Tailwind plugin classes.
 *
 * @element btu-switch
 *
 * @fires {CustomEvent} btu-switch-ready - Fired after the toggle is first rendered and initialized
 * @fires {CustomEvent<{ checked: boolean }>} btu-switch-change - Fired when the user toggles the switch
 * @fires {CustomEvent} btu-switch-focus - Fired when the component gains focus
 *
 * @cssprop --switch-color-track-on - Background color when the toggle is checked (default: var(--btu-theme-primary-700))
 * @cssprop --switch-color-track-off - Background color when the toggle is unchecked (default: var(--btu-theme-gray-300))
 * @cssprop --switch-color-knob - Color of the sliding circular handle (default: var(--btu-theme-white))
 * @cssprop --switch-label-spacing - Distance between the switch and the text label (default: 0.75rem)
 * @cssprop --switch-track-width - Track width (default: sm 1.75rem, md 2.25rem, lg 2.75rem)
 * @cssprop --switch-track-height - Track height (default: sm 1rem, md 1.25rem, lg 1.5rem)
 * @cssprop --switch-knob-size - Knob diameter (default: sm 0.75rem, md 1rem, lg 1.25rem)
 * @cssprop --switch-knob-padding - Space between knob and track edges (default: 0.125rem)
 * @cssprop --switch-track-icon-size - Size of the track icons (default: sm 0.5rem, md 0.625rem, lg 0.75rem)
 */
export default class Switch extends EventEmitterMixin(ReadyMixin(LitElement)) {
    constructor() {
        super(...arguments);
        /**
         * Controls the physical dimensions of the switch and the associated label typography.
         * @attr
         */
        this.size = 'sm';
        /**
         * The current state of the switch (on/off).
         * @attr
         */
        this.checked = false;
        /**
         * If true, the toggle is non-interactive and visually muted.
         * @attr
         */
        this.disabled = false;
        /**
         * Determines if the label appears to the left or right of the switch.
         * @attr label-position
         */
        this.labelPosition = 'end';
        /** @internal */
        this._userInitiated = false;
        /** @internal */
        this.initialClasses = [];
        /** @internal */
        this._initialClassesCaptured = false;
        /** @internal */
        this._descId = `switch-desc-${crypto.randomUUID()}`;
    }
    connectedCallback() {
        super.connectedCallback();
        if (!this._initialClassesCaptured && this.className) {
            this.initialClasses = this.className.split(' ').filter(c => c.trim());
            this._initialClassesCaptured = true;
        }
    }
    createRenderRoot() {
        return this;
    }
    willUpdate(changedProperties) {
        super.willUpdate(changedProperties);
        const classes = [
            ...this.initialClasses,
            'btu-switch',
            SIZE_CLASSES[this.size],
            this.labelPosition === 'start' && 'btu-switch-label-start',
        ];
        this.className = classes.filter(Boolean).join(' ');
    }
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties);
        this.emit('btu-switch-ready');
    }
    updated(changedProperties) {
        super.updated(changedProperties);
        if (!this._userInitiated)
            return;
        this._userInitiated = false;
        if (changedProperties.has('checked')) {
            this.emit('btu-switch-change', { checked: this.checked });
        }
    }
    _onInputChange(e) {
        const input = e.target;
        this._userInitiated = true;
        this.checked = input.checked;
    }
    _onFocus() {
        this.emit('btu-switch-focus');
    }
    _toggleInput() {
        if (this.disabled)
            return;
        this.renderRoot.querySelector('.btu-switch-input')?.click();
    }
    render() {
        return html `
      <input
        type="checkbox"
        role="switch"
        class="btu-switch-input"
        .checked=${this.checked}
        ?disabled=${this.disabled}
        name=${ifDefined(this.name)}
        aria-checked=${this.checked}
        aria-label=${ifDefined(this.label)}
        aria-describedby=${ifDefined(this.description ? this._descId : undefined)}
        @change=${this._onInputChange}
        @focus=${this._onFocus}
      />
      <span class="btu-switch-track" @click=${this._toggleInput}>
        ${this.onIcon
            ? html `<btu-icon
              class="btu-switch-track-icon-on"
              symbol=${this.onIcon}
              style="--icon-size: var(--switch-track-icon-size)"
            ></btu-icon>`
            : nothing}
        <span class="btu-switch-knob"></span>
        ${this.offIcon
            ? html `<btu-icon
              class="btu-switch-track-icon-off"
              symbol=${this.offIcon}
              style="--icon-size: var(--switch-track-icon-size)"
            ></btu-icon>`
            : nothing}
      </span>
      ${this.label || this.description
            ? html `
            <span class="btu-switch-text" @click=${this._toggleInput}>
              ${this.label ? html `<span class="btu-switch-label">${this.label}</span>` : nothing}
              ${this.description
                ? html `<span id=${this._descId} class="btu-switch-description">${this.description}</span>`
                : nothing}
            </span>
          `
            : nothing}
    `;
    }
}
__decorate([
    property()
], Switch.prototype, "size", void 0);
__decorate([
    property()
], Switch.prototype, "label", void 0);
__decorate([
    property()
], Switch.prototype, "description", void 0);
__decorate([
    property({ type: Boolean })
], Switch.prototype, "checked", void 0);
__decorate([
    property({ type: Boolean })
], Switch.prototype, "disabled", void 0);
__decorate([
    property()
], Switch.prototype, "name", void 0);
__decorate([
    property({ attribute: 'label-position' })
], Switch.prototype, "labelPosition", void 0);
__decorate([
    property({ attribute: 'on-icon' })
], Switch.prototype, "onIcon", void 0);
__decorate([
    property({ attribute: 'off-icon' })
], Switch.prototype, "offIcon", void 0);
if (!customElements.get('btu-switch')) {
    customElements.define('btu-switch', Switch);
}
//# sourceMappingURL=Switch.js.map