import { __esDecorate, __runInitializers } from "tslib";
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { FolderKind } from '@api-client/core/models/kinds.js';
let Breadcrumbs = (() => {
    let _classSuper = LitElement;
    let _breadcrumbs_decorators;
    let _breadcrumbs_initializers = [];
    let _breadcrumbs_extraInitializers = [];
    let _rootName_decorators;
    let _rootName_initializers = [];
    let _rootName_extraInitializers = [];
    return class Breadcrumbs extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _breadcrumbs_decorators = [property({ type: Object })];
            _rootName_decorators = [property({ type: String, attribute: 'root-name' })];
            __esDecorate(this, null, _breadcrumbs_decorators, { kind: "accessor", name: "breadcrumbs", static: false, private: false, access: { has: obj => "breadcrumbs" in obj, get: obj => obj.breadcrumbs, set: (obj, value) => { obj.breadcrumbs = value; } }, metadata: _metadata }, _breadcrumbs_initializers, _breadcrumbs_extraInitializers);
            __esDecorate(this, null, _rootName_decorators, { kind: "accessor", name: "rootName", static: false, private: false, access: { has: obj => "rootName" in obj, get: obj => obj.rootName, set: (obj, value) => { obj.rootName = value; } }, metadata: _metadata }, _rootName_initializers, _rootName_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        static shadowRootOptions = {
            mode: 'open',
            delegatesFocus: true,
        };
        #breadcrumbs_accessor_storage = __runInitializers(this, _breadcrumbs_initializers, void 0);
        /**
         * The list of breadcrumbs to render.
         * The breadcrumbs should be ordered from the root to the current folder.
         */
        get breadcrumbs() { return this.#breadcrumbs_accessor_storage; }
        set breadcrumbs(value) { this.#breadcrumbs_accessor_storage = value; }
        #rootName_accessor_storage = (__runInitializers(this, _breadcrumbs_extraInitializers), __runInitializers(this, _rootName_initializers, void 0));
        /**
         * When set it renders the special root folder with the name set on this property.
         * When the root object is clicked then the `navigate` event is dispatched without the `key` property set.
         * @attribute root-name
         */
        get rootName() { return this.#rootName_accessor_storage; }
        set rootName(value) { this.#rootName_accessor_storage = value; }
        constructor() {
            super();
            __runInitializers(this, _rootName_extraInitializers);
            this.role = 'navigation';
            this.ariaLabel = 'Breadcrumbs';
            this.handleLiveData = this.handleLiveData.bind(this);
        }
        updated(cp) {
            if (cp.has('breadcrumbs')) {
                const old = cp.get('breadcrumbs');
                if (old) {
                    old.removeEventListener('update', this.handleLiveData);
                }
                if (this.breadcrumbs) {
                    this.breadcrumbs.addEventListener('update', this.handleLiveData);
                }
            }
        }
        handleLiveData() {
            this.requestUpdate();
        }
        handleLinkClick(e) {
            const target = e.target;
            const { key, kind } = target.dataset;
            if (kind === 'root') {
                this.navigateRoot();
                return;
            }
            if (!key) {
                return;
            }
            this.navigate(key);
        }
        navigate(key) {
            const { breadcrumbs } = this;
            if (!breadcrumbs) {
                return;
            }
            const item = breadcrumbs.value.find((i) => i.key === key);
            if (!item) {
                return;
            }
            this.dispatchEvent(new CustomEvent('navigate', { detail: item }));
        }
        navigateRoot() {
            this.dispatchEvent(new CustomEvent('navigate', {
                detail: {
                    kind: 'root',
                    name: this.rootName,
                },
            }));
        }
        render() {
            const { breadcrumbs, rootName } = this;
            const items = Array.from(breadcrumbs?.value || []).filter((i) => i.kind === FolderKind);
            if (rootName) {
                items.unshift({ key: '', name: rootName, kind: 'root' });
            }
            return html `
      <div class="container" role="list">
        ${items.map((item, index) => {
                return this.renderItem(item, index === items.length - 1);
            })}
      </div>
    `;
        }
        renderItem(item, isLast = false) {
            const content = isLast ? this.renderButton(item) : this.renderLink(item);
            return html `
      <div class="item spacing-headline-small" role="listitem">${content}</div>
      ${isLast ? '' : this.renderSeparator()}
    `;
        }
        renderLink(item) {
            const { key, kind, name } = item;
            return html `
      <div
        tabindex="0"
        role="link"
        data-key="${key}"
        data-kind="${kind}"
        class="link-button"
        @click="${this.handleLinkClick}"
      >
        <ui-focus-ring part="focus-ring"></ui-focus-ring>
        ${name}
      </div>
    `;
        }
        renderButton(item) {
            const { key, kind, name } = item;
            return html `
      <div tabindex="0" role="button" data-key="${key}" data-kind="${kind}" class="action-button" aria-current="page">
        <ui-focus-ring part="focus-ring"></ui-focus-ring>
        ${name}
      </div>
    `;
        }
        renderSeparator() {
            return html `<ui-icon class="separator">chevron_right</ui-icon>`;
        }
    };
})();
/**
 * @fires navigate - Dispatched when a navigation item is activated.
 *    The detail object is the `FileBreadcrumb` interface. The root object has the `id` set to empty string.
 */
export default Breadcrumbs;
//# sourceMappingURL=Breadcrumbs.js.map