/**
 * Copyright Aquera Inc 2025
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-inline-sidebar-item.css';
import NileElement from '../internal/nile-element';
import { classMap } from 'lit/directives/class-map.js';
/**
 * Nile inline sidebar item.
 *
 * @tag nile-inlinesidebar-item
 *
 * @attr active - Marks the item as active (selected).
 * @attr disabled - Marks the item as disabled (non-interactive).
 * @attr href - Optional URL to navigate to when the item is clicked.
 *
 * @slot - Default slot for the item text or content.
 *
 * @fires nile-select - Emitted when the item is clicked (not disabled).
 *   detail: { item: this, href?: string }
 */
let NileInlineSidebarItem = class NileInlineSidebarItem extends NileElement {
    constructor() {
        super(...arguments);
        this.active = false;
        this.disabled = false;
        this.tooltip = false;
        this.variant = 'minimal';
        this._handleHostKeyDown = (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                this._select(e);
            }
        };
    }
    static get styles() {
        return [styles];
    }
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties);
        this.syncBodyAndHeaderStates();
    }
    updated(changedProperties) {
        super.updated(changedProperties);
        if (changedProperties.has('disabled') || changedProperties.has('active')) {
            this.syncBodyAndHeaderStates();
        }
    }
    syncBodyAndHeaderStates() {
        const elements = [
            this.querySelector('[slot="body"]'),
            this.querySelector('[slot="header"]')
        ];
        const props = {
            disabled: this.disabled,
            active: this.active
        };
        elements.forEach(el => {
            if (!el)
                return;
            Object.entries(props).forEach(([key, value]) => {
                if (key in el) {
                    el[key] = value;
                }
            });
        });
    }
    connectedCallback() {
        super.connectedCallback();
        if (!this.hasAttribute('tabindex')) {
            this.setAttribute('tabindex', this.disabled ? '-1' : '0');
        }
        if (!this.hasAttribute('role')) {
            this.setAttribute('role', 'menuitem');
        }
        this.addEventListener('keydown', this._handleHostKeyDown);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener('keydown', this._handleHostKeyDown);
    }
    _select(e) {
        if (this.disabled) {
            e.preventDefault();
            e.stopPropagation();
            return;
        }
        const parent = this.closest('nile-inline-sidebar');
        if (parent) {
            const allItems = parent.querySelectorAll('nile-inline-sidebar-item');
            allItems.forEach((item) => item.active = item === this);
        }
        const text = this.textContent?.trim() || '';
        this.dispatchEvent(new CustomEvent('nile-click', {
            detail: { item: this, href: this.href, text },
            bubbles: true,
            composed: true,
        }));
        if (this.href) {
            window.location.href = this.href;
        }
    }
    handleClick(e) {
        this._select(e);
    }
    render() {
        return html `
      <div
        class=${classMap({ 'item': true, 'item--rich': this.variant === 'rich' })}
        @click=${this.handleClick}
        role="menuitem"
        style=${this.variant === 'rich' ? 'border-radius: 4px 0 0 4px;' : ''}
        aria-disabled=${this.disabled}
      >
        ${this.variant === 'minimal'
            ? this.href
                ? html `<a href=${this.href} @click=${(e) => e.preventDefault()}><slot></slot></a>`
                : html `<slot></slot>`
            : this.href
                ? html `<a
                href=${this.href}
                @click=${(e) => e.preventDefault()}
              >
                <div class="header-content" part="header-content">
                  <slot name="header"></slot>
                </div>
                <div class="body-content" part="body-content">
                  <slot name="body"></slot>
                </div>
              </a>`
                : html `
                <div class="header-content" part="header-content">
                  <slot name="header"></slot>
                </div>
                <div class="body-content" part="body-content">
                  <slot name="body"></slot>
                </div>
              `}
      </div>
    `;
    }
};
__decorate([
    property({ type: Boolean, reflect: true })
], NileInlineSidebarItem.prototype, "active", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileInlineSidebarItem.prototype, "disabled", void 0);
__decorate([
    property({ type: String })
], NileInlineSidebarItem.prototype, "href", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileInlineSidebarItem.prototype, "tooltip", void 0);
__decorate([
    property({ type: String, reflect: true, attribute: true })
], NileInlineSidebarItem.prototype, "variant", void 0);
__decorate([
    property({ type: String, reflect: true })
], NileInlineSidebarItem.prototype, "panel", void 0);
NileInlineSidebarItem = __decorate([
    customElement('nile-inline-sidebar-item')
], NileInlineSidebarItem);
export { NileInlineSidebarItem };
export default NileInlineSidebarItem;
//# sourceMappingURL=nile-inline-sidebar-item.js.map