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 } from 'lit';
import { property } from 'lit/decorators.js';
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
import onFind from '../../util/onFind.js';
import { ReadyMixin } from '../../util/ReadyMixin.js';
import '../button-group/ButtonGroup.js';
import './EmptyState.css';
const HEADING_LEVEL_BY_SIZE = {
    sm: 5,
    md: 4,
    lg: 3,
};
const ICON_SIZE_BY_EMPTY_STATE_SIZE = {
    sm: 'md',
    md: 'lg',
    lg: 'xl',
};
const MANAGED_CLASSES = new Set([
    'btu-empty-state',
    'btu-empty-state-sm',
    'btu-empty-state-md',
    'btu-empty-state-lg',
]);
const isHeadingLevel = (n) => typeof n === 'number' && Number.isInteger(n) && n >= 1 && n <= 6;
/**
 * An empty state component for displaying placeholder content when no data is available.
 *
 * Supports a graphic slot for icons/images/pictures/SVGs, a heading, a description,
 * and an actions slot for buttons or links. Available in three sizes (sm, md, lg)
 * with semantic heading levels.
 *
 * ## Architecture: Light DOM + Pseudo-Slots
 *
 * This component uses **Light DOM** (no Shadow Root) with pseudo-slots:
 * - User-provided children are physically moved into internal containers
 * - Movement is based on `slot` attributes
 * - The `onFind` utility detects and redistributes newly-added children (one-time per element)
 *
 * ### Node Redistribution Rules
 * - `slot="graphic"` - Moved to graphic container (icon, image, picture, or SVG)
 * - `slot="actions"` - Moved to an internal `btu-button-group` (variant="spaced")
 *
 * ### Actions composition
 *
 * The actions container IS a `btu-button-group` with `variant="spaced"`. Its `size`
 * is mapped from the empty-state `size` prop (sm→small, md→medium, lg→large) so all
 * child `btu-button` / `btu-icon-button` elements get consistent sizing and group
 * semantics (`role="group"`, roving tabindex, disabled propagation) for free.
 *
 * @element btu-empty-state
 *
 * @fires {CustomEvent} btu-empty-state-ready - Fired after first render and initialization
 * @fires {CustomEvent} btu-button-group-ready - Bubbles from the internal actions button-group
 *
 * @cssprop --empty-state-max-width - Maximum width of the content block (default: min(75cqw, 360px))
 * @cssprop --empty-state-color-heading - Heading text color (default: gray-900)
 * @cssprop --empty-state-color-description - Description text color (default: gray-500)
 *
 * @slot graphic - Pseudo-slot for icon, image, picture, or SVG graphic.
 *   When the child is a `btu-icon`, the component overrides its `size` attribute
 *   based on the empty-state `size` prop (sm→md, md→lg, lg→xl). Use an `img`,
 *   `picture`, or inline `svg` for full size control.
 * @slot actions - Pseudo-slot for action buttons. Children are moved into an internal
 *   `btu-button-group` (variant="spaced"), so size and disabled state are managed
 *   by the group.
 *
 * @example
 * ```html
 * <btu-empty-state heading="No results found" description="Try adjusting your search criteria.">
 *   <btu-icon slot="graphic" symbol="search" size="xl"></btu-icon>
 *   <button slot="actions">Clear filters</button>
 * </btu-empty-state>
 * ```
 */
export default class EmptyState extends EventEmitterMixin(ReadyMixin(LitElement)) {
    constructor() {
        super(...arguments);
        /**
         * Heading text displayed in the empty state.
         * @attr
         */
        this.heading = '';
        /**
         * Size variant of the empty state. Affects spacing, description text, graphic size,
         * and — when `heading-level` is unset — the default heading level (sm→5, md→4, lg→3).
         * @attr
         */
        this.size = 'md';
        this.initialClasses = [];
    }
    createRenderRoot() {
        return this;
    }
    connectedCallback() {
        super.connectedCallback();
        if (this.className) {
            this.initialClasses = this.className.split(' ').filter(c => c.trim() && !MANAGED_CLASSES.has(c));
        }
    }
    willUpdate(changedProperties) {
        super.willUpdate(changedProperties);
        const classes = [...this.initialClasses, 'btu-empty-state', `btu-empty-state-${this.size}`];
        this.className = classes.filter(Boolean).join(' ');
        if (changedProperties.has('headingLevel') && this.headingLevel != null && !isHeadingLevel(this.headingLevel)) {
            console.warn(`EmptyState: Invalid heading-level="${this.headingLevel}". Valid values are 1-6. Falling back to size-based default.`);
        }
    }
    firstUpdated() {
        const graphicContainer = this.querySelector('.btu-empty-state-graphic');
        const actionsContainer = this.querySelector('.btu-empty-state-actions');
        if (graphicContainer && actionsContainer) {
            onFind(this, ':scope > :not([data-empty-state-internal])', el => {
                const slot = el.getAttribute('slot');
                if (slot === 'graphic') {
                    graphicContainer.appendChild(el);
                    if (el.tagName === 'BTU-ICON') {
                        this.syncGraphicIconSize();
                    }
                }
                else if (slot === 'actions') {
                    actionsContainer.appendChild(el);
                }
                else if (slot) {
                    console.warn(`EmptyState: Unrecognized slot="${slot}". Valid slots are "graphic" and "actions".`, el);
                }
                else {
                    console.warn('EmptyState: Child element has no slot attribute. Use slot="graphic" or slot="actions".', el);
                }
            });
        }
        this.emit('btu-empty-state-ready');
    }
    updated(changedProperties) {
        super.updated(changedProperties);
        if (changedProperties.has('size')) {
            this.syncGraphicIconSize();
        }
    }
    syncGraphicIconSize() {
        const icon = this.querySelector('.btu-empty-state-graphic btu-icon');
        if (icon) {
            icon.setAttribute('size', ICON_SIZE_BY_EMPTY_STATE_SIZE[this.size]);
        }
    }
    resolveHeadingLevel() {
        return isHeadingLevel(this.headingLevel) ? this.headingLevel : HEADING_LEVEL_BY_SIZE[this.size];
    }
    renderHeading(level, className) {
        if (!this.heading)
            return '';
        switch (level) {
            case 1:
                return html `<h1 class="${className}" data-empty-state-internal>${this.heading}</h1>`;
            case 2:
                return html `<h2 class="${className}" data-empty-state-internal>${this.heading}</h2>`;
            case 3:
                return html `<h3 class="${className}" data-empty-state-internal>${this.heading}</h3>`;
            case 4:
                return html `<h4 class="${className}" data-empty-state-internal>${this.heading}</h4>`;
            case 5:
                return html `<h5 class="${className}" data-empty-state-internal>${this.heading}</h5>`;
            case 6:
                return html `<h6 class="${className}" data-empty-state-internal>${this.heading}</h6>`;
        }
    }
    render() {
        const level = this.resolveHeadingLevel();
        const headingClass = `btu-empty-state-title btu-heading-${level}`;
        return html `
      <div class="btu-empty-state-graphic" data-empty-state-internal></div>
      <div class="btu-empty-state-content" data-empty-state-internal>
        ${this.renderHeading(level, headingClass)}
        ${this.description
            ? html `<p class="btu-empty-state-description" data-empty-state-internal>${this.description}</p>`
            : ''}
      </div>
      <btu-button-group
        class="btu-empty-state-actions"
        variant="spaced"
        size="${this.size}"
        data-empty-state-internal
      ></btu-button-group>
    `;
    }
}
__decorate([
    property({ type: String })
], EmptyState.prototype, "heading", void 0);
__decorate([
    property({ type: String })
], EmptyState.prototype, "description", void 0);
__decorate([
    property({ type: String })
], EmptyState.prototype, "size", void 0);
__decorate([
    property({ type: Number, attribute: 'heading-level' })
], EmptyState.prototype, "headingLevel", void 0);
// Register custom element with guard to prevent double registration
// (common with yarn link, HMR, or webpack bundle duplication)
if (!customElements.get('btu-empty-state')) {
    customElements.define('btu-empty-state', EmptyState);
}
//# sourceMappingURL=EmptyState.js.map