import { __esDecorate, __runInitializers } from "tslib";
import { html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { consume } from '@lit/context';
import { organizationContext } from '../../../providers/organization.js';
import { organizationsContext } from '../../../providers/organizations.js';
let OrganizationSelector = (() => {
    let _classSuper = LitElement;
    let _organization_decorators;
    let _organization_initializers = [];
    let _organization_extraInitializers = [];
    let _organizations_decorators;
    let _organizations_initializers = [];
    let _organizations_extraInitializers = [];
    return class OrganizationSelector extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _organization_decorators = [property({ type: Object, attribute: false }), consume({ context: organizationContext, subscribe: true })];
            _organizations_decorators = [property({ type: Array, attribute: false }), consume({ context: organizationsContext, subscribe: true })];
            __esDecorate(this, null, _organization_decorators, { kind: "accessor", name: "organization", static: false, private: false, access: { has: obj => "organization" in obj, get: obj => obj.organization, set: (obj, value) => { obj.organization = value; } }, metadata: _metadata }, _organization_initializers, _organization_extraInitializers);
            __esDecorate(this, null, _organizations_decorators, { kind: "accessor", name: "organizations", static: false, private: false, access: { has: obj => "organizations" in obj, get: obj => obj.organizations, set: (obj, value) => { obj.organizations = value; } }, metadata: _metadata }, _organizations_initializers, _organizations_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #organization_accessor_storage = __runInitializers(this, _organization_initializers, void 0);
        /**
         * The currently selected organization, if any.
         * When set, the button label will show this organization's name.
         *
         * This property consumes the `organizationContext`.
         */
        get organization() { return this.#organization_accessor_storage; }
        set organization(value) { this.#organization_accessor_storage = value; }
        #organizations_accessor_storage = (__runInitializers(this, _organization_extraInitializers), __runInitializers(this, _organizations_initializers, void 0));
        /**
         * The list of available organizations to display in the dropdown menu.
         *
         * This property consumes the `organizationsContext`.
         */
        get organizations() { return this.#organizations_accessor_storage; }
        set organizations(value) { this.#organizations_accessor_storage = value; }
        /**
         * A handler for organization selection from the menu.
         */
        handleOrgSelect(e) {
            const { item } = e.detail;
            const { action = '' } = item.dataset;
            if (action === 'select' && item.value) {
                this.notifySelect(item.value);
            }
            else if (action === 'new') {
                this.notifyCreate();
            }
        }
        /**
         * Notifies about organization selection.
         * @param organizationKey The key of the organization that was selected by the user.
         */
        notifySelect(organizationKey) {
            this.dispatchEvent(new CustomEvent('select', {
                detail: { organization: organizationKey },
                bubbles: false,
                composed: false,
            }));
        }
        /**
         * Notifies about the request to create a new organization.
         */
        notifyCreate() {
            this.dispatchEvent(new CustomEvent('create', {
                bubbles: false,
                composed: false,
            }));
        }
        render() {
            return html `<span class="container">${this.renderTrigger()} ${this.renderMenu()}</span>`;
        }
        renderTrigger() {
            const { organization } = this;
            const orgName = organization ? organization.name : 'Select Organization';
            return html `
      <ui-button
        id="org-selector-anchor"
        aria-label="Current organization: ${orgName}"
        trailingicon
        color="tonal"
        popoverTarget="org-selector-menu"
      >
        ${orgName}
        <ui-icon slot="icon">arrow_drop_down</ui-icon>
      </ui-button>
    `;
        }
        renderMenu() {
            const { organization, organizations = [] } = this;
            const orgKey = organization ? organization.key : '';
            return html `
      <ui-menu id="org-selector-menu" popover="auto" @select="${this.handleOrgSelect}">
        ${repeat(organizations, (org) => org.key, (org) => html `<ui-menu-item
              showSelectionIcon
              data-action="select"
              value="${org.key}"
              ?selected="${org.key === orgKey}"
              ><div>${org.name}</div>
            </ui-menu-item>`)}
        <ui-divider role="separator"></ui-divider>
        <ui-menu-item data-action="new">
          <div>New Organization</div>
          <ui-icon slot="start">add</ui-icon>
        </ui-menu-item>
      </ui-menu>
    `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _organizations_extraInitializers);
        }
    };
})();
/**
 * An element that allows selecting an organization from a list.
 * It renders a button with the current organization name that triggers a dropdown menu with available organizations.
 *
 * The component supports creating a new organization via a dedicated menu item.
 *
 * @example
 * ```html
 * <organization-selector
 *   .organization="${this.selectedOrg}"
 *   .organizations="${this.availableOrgs}"
 *   @select="${this.handleSelection}"
 *   @create="${this.handleCreate}"
 * ></organization-selector>
 * ```
 *
 * @fires select - Dispatched when the user selects an organization. The detail object contains the `organization` key.
 * @fires create - Dispatched when the user clicks on the "New Organization" menu item.
 */
export default OrganizationSelector;
//# sourceMappingURL=OrganizationSelector.js.map