import { __esDecorate, __runInitializers } from "tslib";
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
export function isNavigationPage(value = '') {
    return ['data-domain', 'description', 'api-access', 'session', 'actions', 'publish'].includes(value);
}
let ApiModelingNavigation = (() => {
    let _classSuper = LitElement;
    let _page_decorators;
    let _page_initializers = [];
    let _page_extraInitializers = [];
    let _collapsed_decorators;
    let _collapsed_initializers = [];
    let _collapsed_extraInitializers = [];
    return class ApiModelingNavigation extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _page_decorators = [property({ type: String })];
            _collapsed_decorators = [property({ type: Boolean, reflect: true })];
            __esDecorate(this, null, _page_decorators, { kind: "accessor", name: "page", static: false, private: false, access: { has: obj => "page" in obj, get: obj => obj.page, set: (obj, value) => { obj.page = value; } }, metadata: _metadata }, _page_initializers, _page_extraInitializers);
            __esDecorate(this, null, _collapsed_decorators, { kind: "accessor", name: "collapsed", static: false, private: false, access: { has: obj => "collapsed" in obj, get: obj => obj.collapsed, set: (obj, value) => { obj.collapsed = value; } }, metadata: _metadata }, _collapsed_initializers, _collapsed_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #page_accessor_storage = __runInitializers(this, _page_initializers, 'data-domain'
        /**
         * Whether the navigation is collapsed (drawer closed).
         * @attribute
         */
        );
        /**
         * The current navigation page.
         * @attribute
         */
        get page() { return this.#page_accessor_storage; }
        set page(value) { this.#page_accessor_storage = value; }
        #collapsed_accessor_storage = (__runInitializers(this, _page_extraInitializers), __runInitializers(this, _collapsed_initializers, false
        /**
         * Sets the current navigation page and fires the `pagechange` event.
         * @param page The page to set
         */
        ));
        /**
         * Whether the navigation is collapsed (drawer closed).
         * @attribute
         */
        get collapsed() { return this.#collapsed_accessor_storage; }
        set collapsed(value) { this.#collapsed_accessor_storage = value; }
        /**
         * Sets the current navigation page and fires the `pagechange` event.
         * @param page The page to set
         */
        selectPage(page) {
            this.page = page;
            this.dispatchEvent(new CustomEvent('pagechange', {
                detail: { page },
                bubbles: true,
                composed: true,
            }));
        }
        /**
         * A handler for the navigation select event.
         * @param event The select event
         */
        handleSelect(event) {
            const selectedPage = event.detail.item.dataset.page;
            const page = selectedPage?.substring(1); // Remove leading slash
            if (isNavigationPage(page)) {
                this.selectPage(page);
            }
        }
        render() {
            const { collapsed, page = 'data-domain' } = this;
            return html `
      <ui-navigation aria-label="Main navigation" current="step" class="drawer" @select="${this.handleSelect}">
        <ui-navigation-item data-page="/data-domain" .iconOnly=${collapsed} .selected=${page === 'data-domain'}>
          <ui-icon slot="icon" icon="schemaNamespace"></ui-icon>
          Data Domain
        </ui-navigation-item>
        <ui-navigation-item data-page="/description" .iconOnly=${collapsed} .selected=${page === 'description'}>
          <ui-icon slot="icon">description</ui-icon>
          Description
        </ui-navigation-item>
        <ui-navigation-item data-page="/api-access" .iconOnly=${collapsed} .selected=${page === 'api-access'}>
          <ui-icon slot="icon">lock</ui-icon>
          Api Access
        </ui-navigation-item>
        <ui-navigation-item data-page="/session" .iconOnly=${collapsed} .selected=${page === 'session'}>
          <ui-icon slot="icon">person</ui-icon>
          Session
        </ui-navigation-item>
        <ui-navigation-item data-page="/actions" .iconOnly=${collapsed} .selected=${page === 'actions'}>
          <ui-icon slot="icon">integration_instructions</ui-icon>
          Actions
        </ui-navigation-item>
        <ui-navigation-item data-page="/publish" .iconOnly=${collapsed} .selected=${page === 'publish'}>
          <ui-icon slot="icon">publish</ui-icon>
          Publish
        </ui-navigation-item>
      </ui-navigation>
    `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _collapsed_extraInitializers);
        }
    };
})();
/**
 * The navigation component for API modeling screens.
 *
 * @fires pagechange - Fired when the navigation page changes. The detail object has
 *                     the `page` property with the new page.
 */
export default ApiModelingNavigation;
//# sourceMappingURL=ApiModelingNavigation.js.map