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 { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
import { ReadyMixin } from '../../util/ReadyMixin.js';
import '../badge/Badge.js';
import '../icon/Icon.js';
/**
 * A menu item component for use inside `btu-dropdown-menu`.
 *
 * Renders as a menu item, divider, or subhead depending on the `type` property.
 * Supports checkbox mode (inherited from parent menu), icons, keyboard shortcuts,
 * and favorite toggles.
 *
 * @element btu-dropdown-item
 *
 * @fires {CustomEvent} btu-dropdown-item-ready - Fired after first render
 * @fires {CustomEvent<{label: string, value: string, selected: boolean}>} btu-dropdown-item-select - Fired when item is activated
 * @fires {CustomEvent<{label: string, favorited: boolean}>} btu-dropdown-item-favorite - Fired when favorite is toggled
 *
 * @cssprop --dropdown-item-font-size - Item font size (default: theme fontSize.sm)
 * @cssprop --dropdown-item-color - Item text color (default: gray-700)
 * @cssprop --dropdown-item-background - Item background color (default: transparent)
 * @cssprop --dropdown-item-hover-background - Background on hover (default: gray-100)
 * @cssprop --dropdown-item-hover-color - Text color on hover (default: gray-900)
 * @cssprop --dropdown-item-selected-background - Background when selected (default: primary-50)
 * @cssprop --dropdown-item-selected-color - Text color when selected (default: primary-700)
 *
 * @example
 * ```html
 * <!-- Basic item -->
 * <btu-dropdown-item label="Edit"></btu-dropdown-item>
 *
 * <!-- Item with icon and shortcut -->
 * <btu-dropdown-item label="Save" symbol="save" shortcut="Ctrl+S"></btu-dropdown-item>
 * ```
 */
export default class DropdownItem extends EventEmitterMixin(ReadyMixin(LitElement)) {
    constructor() {
        super(...arguments);
        /**
         * Display text for the item.
         * @attr
         */
        this.label = '';
        /**
         * Item type: 'default', 'divider', or 'subhead'.
         * @attr
         */
        this.type = 'default';
        /**
         * Lucide icon symbol.
         * @attr
         */
        this.symbol = '';
        /**
         * Keyboard shortcut display text.
         * @attr
         */
        this.shortcut = '';
        /**
         * Optional data value associated with the item.
         * @attr
         */
        this.value = '';
        /**
         * Whether the item is disabled.
         * @attr
         */
        this.disabled = false;
        /**
         * Whether the item is selected/checked.
         * @attr
         */
        this.selected = false;
        /**
         * Whether the item is favorited.
         * @attr
         */
        this.favorited = false;
        /**
         * Whether the item has an error.
         * @attr
         */
        this.error = false;
        /** @internal */
        this._generatedId = `btu-dropdown-subhead-${crypto.randomUUID().slice(0, 8)}`;
        /** @internal */
        this._checkboxMode = false;
        /** @internal */
        this._showIcon = false;
        /** @internal */
        this._showFavorites = false;
        /** @internal */
        this._showShortcuts = false;
        /** @internal */
        this._parentMenuSymbol = '';
    }
    createRenderRoot() {
        return this;
    }
    /** @internal Called by DropdownMenu to configure inherited settings */
    _configure(opts) {
        this._checkboxMode = opts.checkbox;
        this._showIcon = opts.icon || !!this.symbol;
        this._parentMenuSymbol = opts.symbol;
        this._showFavorites = opts.favorites;
        this._showShortcuts = opts.shortcuts;
        this.requestUpdate();
    }
    /** @internal Whether this item is focusable (not a divider or subhead) */
    get focusable() {
        return this.type === 'default';
    }
    firstUpdated() {
        this.emit('btu-dropdown-item-ready');
    }
    /** @internal Activate this item (Enter/click) */
    activate() {
        if (this.disabled)
            return;
        if (this._checkboxMode) {
            this.selected = !this.selected;
        }
        this.emit('btu-dropdown-item-select', {
            label: this.label,
            value: this.value,
            selected: this.selected,
        });
    }
    /** Toggle favorite state */
    _toggleFavorite(e) {
        e.stopPropagation();
        this.favorited = !this.favorited;
        this.emit('btu-dropdown-item-favorite', {
            label: this.label,
            favorited: this.favorited,
        });
    }
    render() {
        if (this.type === 'divider') {
            return html `<hr class="btu-dropdown-divider" role="separator" />`;
        }
        if (this.type === 'subhead') {
            return html `<div class="btu-dropdown-subhead" role="presentation" id="${this._generatedId}">${this.label}</div>`;
        }
        const role = this._checkboxMode ? 'menuitemcheckbox' : 'menuitem';
        const classes = [
            'btu-dropdown-item',
            this.selected ? 'btu-dropdown-item-selected' : '',
            this.disabled ? 'btu-dropdown-item-disabled' : '',
        ]
            .filter(Boolean)
            .join(' ');
        const resolvedSymbol = this.symbol || this._parentMenuSymbol;
        return html `<div
      class="${classes}"
      role="${role}"
      tabindex="-1"
      aria-disabled="${this.disabled}"
      .ariaChecked="${this._checkboxMode ? String(this.selected) : null}"
      @click="${this._handleClick}"
    >
      ${this._checkboxMode
            ? html `<span class="${this.selected ? 'btu-dropdown-checkbox-checked' : ''} btu-dropdown-checkbox">
            ${this.selected ? html `<btu-icon symbol="check" size="xs"></btu-icon>` : nothing}
          </span>`
            : nothing}
      ${!this._checkboxMode && this.selected
            ? html `<span class="btu-dropdown-check"><btu-icon symbol="check" size="sm"></btu-icon></span>`
            : nothing}
      ${this._showIcon && resolvedSymbol
            ? html `<span class="btu-dropdown-item-icon"><btu-icon symbol="${resolvedSymbol}" size="sm"></btu-icon></span>`
            : nothing}
      <span class="btu-dropdown-item-label">${this.label}</span>
      ${this.error ? html `<btu-badge size="sm" variant="error">!</btu-badge>` : nothing}
      ${this._showShortcuts && this.shortcut
            ? html `<span class="btu-dropdown-shortcut">${this.shortcut}</span>`
            : nothing}
      ${this._showFavorites
            ? html `<button
            type="button"
            class="${this.favorited
                ? 'btu-dropdown-favorite-active'
                : ''} btu-button btu-button-text-hidden btu-button-gray btu-button-sm btu-dropdown-favorite btu-button-container-none"
            @click="${this._toggleFavorite}"
            aria-label="${this.favorited ? 'Remove from favorites' : 'Add to favorites'}"
            aria-pressed="${this.favorited}"
          >
            <btu-icon symbol="star" size="sm"></btu-icon>
          </button>`
            : nothing}
    </div>`;
    }
    _handleClick() {
        this.activate();
    }
}
__decorate([
    property({ type: String })
], DropdownItem.prototype, "label", void 0);
__decorate([
    property({ type: String })
], DropdownItem.prototype, "type", void 0);
__decorate([
    property({ type: String })
], DropdownItem.prototype, "symbol", void 0);
__decorate([
    property({ type: String })
], DropdownItem.prototype, "shortcut", void 0);
__decorate([
    property({ type: String })
], DropdownItem.prototype, "value", void 0);
__decorate([
    property({ type: Boolean })
], DropdownItem.prototype, "disabled", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], DropdownItem.prototype, "selected", void 0);
__decorate([
    property({ type: Boolean })
], DropdownItem.prototype, "favorited", void 0);
__decorate([
    property({ type: Boolean })
], DropdownItem.prototype, "error", void 0);
if (!customElements.get('btu-dropdown-item')) {
    customElements.define('btu-dropdown-item', DropdownItem);
}
//# sourceMappingURL=DropdownItem.js.map