/**
 * Copyright Aquera Inc 2023
 *
 * 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-side-bar-group-item-icon.css';
import NileElement from '../internal/nile-element';
/**
 * Nile side-bar-group-item-icon component.
 *
 * @tag nile-side-bar-group-item-icon
 *
 * @attr icon - The name of the icon to render inside <nile-icon>
 * @attr tooltip - Tooltip text shown when sidebar is collapsed
 *
 * @slot - Optional slot to override the icon completely
 */
let NileSideBarGroupItemIcon = class NileSideBarGroupItemIcon extends NileElement {
    constructor() {
        super(...arguments);
        /**
         * Name of the icon (passed to <nile-icon name="">)
         */
        this.icon = '';
        /**
         * Tooltip text (auto-synced from sibling text if available)
         */
        this.tooltip = '';
        this.method = 'fill';
        this.size = '14';
        this.enableVisibilityEffect = false;
        this.duration = 200;
        this.sidebar = null;
    }
    static get styles() {
        return [styles];
    }
    connectedCallback() {
        if (!this.hasAttribute('slot')) {
            this.setAttribute('slot', 'icon');
        }
        super.connectedCallback();
        this.sidebar = this.closest('nile-side-bar');
        if (this.sidebar) {
            const observer = new MutationObserver(() => this.requestUpdate());
            observer.observe(this.sidebar, { attributes: true, attributeFilter: ['collapsed'] });
            this._observer = observer;
        }
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this._observer?.disconnect();
    }
    getSiblingText() {
        const parent = this.parentElement;
        const textEl = parent?.querySelector('nile-side-bar-group-item-text');
        return textEl?.textContent?.trim() ?? '';
    }
    render() {
        const isCollapsed = !!this.sidebar?.collapsed;
        const text = this.tooltip || this.getSiblingText();
        if (isCollapsed && text) {
            return html `

          <slot>
          <nile-lite-tooltip hoist distance="18" content=${text} placement="right" enableVisibilityEffect=${this.enableVisibilityEffect} duration=${this.duration}>
            ${this.icon ? html `<nile-icon size=${this.size}  color="var(--nile-colors-dark-900,var(--ng-colors-fg-quaternary-400))" name=${this.icon} method=${this.method}></nile-icon>` : null}
            </nile-lite-tooltip>
          </slot>

      `;
        }
        return html `
      <slot>
        ${this.icon ? html `<nile-icon size=${this.size} color="var(--nile-colors-dark-900,var(--ng-colors-fg-quaternary-400))" size="14" name=${this.icon} method=${this.method}></nile-icon>` : null}
      </slot>
    `;
    }
};
__decorate([
    property({ type: String, reflect: true })
], NileSideBarGroupItemIcon.prototype, "icon", void 0);
__decorate([
    property({ type: String })
], NileSideBarGroupItemIcon.prototype, "tooltip", void 0);
__decorate([
    property({ type: String })
], NileSideBarGroupItemIcon.prototype, "method", void 0);
__decorate([
    property({ type: String })
], NileSideBarGroupItemIcon.prototype, "size", void 0);
__decorate([
    property({ type: Boolean, attribute: true, reflect: true })
], NileSideBarGroupItemIcon.prototype, "enableVisibilityEffect", void 0);
__decorate([
    property({ type: Number, attribute: true, reflect: true })
], NileSideBarGroupItemIcon.prototype, "duration", void 0);
NileSideBarGroupItemIcon = __decorate([
    customElement('nile-side-bar-group-item-icon')
], NileSideBarGroupItemIcon);
export { NileSideBarGroupItemIcon };
export default NileSideBarGroupItemIcon;
//# sourceMappingURL=nile-side-bar-group-item-icon.js.map