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 { organizationsContext } from '../../../providers/organizations.js';
let OrganizationSelectionScreen = (() => {
    let _classSuper = LitElement;
    let _organizations_decorators;
    let _organizations_initializers = [];
    let _organizations_extraInitializers = [];
    let _loading_decorators;
    let _loading_initializers = [];
    let _loading_extraInitializers = [];
    let _selected_decorators;
    let _selected_initializers = [];
    let _selected_extraInitializers = [];
    return class OrganizationSelectionScreen extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _organizations_decorators = [property({ type: Array, attribute: false }), consume({ context: organizationsContext, subscribe: true })];
            _loading_decorators = [property({ type: Boolean })];
            _selected_decorators = [property({ type: String })];
            __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);
            __esDecorate(this, null, _loading_decorators, { kind: "accessor", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
            __esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #organizations_accessor_storage = __runInitializers(this, _organizations_initializers, void 0);
        /**
         * The list of organizations to select from.
         *
         * This property consumes the `organizationsContext`.
         */
        get organizations() { return this.#organizations_accessor_storage; }
        set organizations(value) { this.#organizations_accessor_storage = value; }
        #loading_accessor_storage = (__runInitializers(this, _organizations_extraInitializers), __runInitializers(this, _loading_initializers, false
        /**
         * The currently selected organization key, if any. Can be used to pre-select an organization in the list.
         * When the user makes a selection, an `organization-selected` event is dispatched and this property is updated.
         * @attribute
         */
        ));
        /**
         * Indicates whether the screen is in the loading state.
         * @attribute
         */
        get loading() { return this.#loading_accessor_storage; }
        set loading(value) { this.#loading_accessor_storage = value; }
        #selected_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _selected_initializers, void 0));
        /**
         * The currently selected organization key, if any. Can be used to pre-select an organization in the list.
         * When the user makes a selection, an `organization-selected` event is dispatched and this property is updated.
         * @attribute
         */
        get selected() { return this.#selected_accessor_storage; }
        set selected(value) { this.#selected_accessor_storage = value; }
        /**
         * Handles the organization selection form submission.
         * @param e The submit event
         */
        async handleOrgSelection(e) {
            e.preventDefault();
            const form = e.target;
            const organization = String(form.org.value).trim();
            if (!organization) {
                return;
            }
            this.selectOrganization(organization);
        }
        /**
         * Selects the organization and persists the state.
         * @param organization The organization key to select
         */
        selectOrganization(organization) {
            this.selected = organization;
            this.dispatchEvent(new CustomEvent('organization-selected', {
                detail: { organization },
                bubbles: true,
                composed: true,
            }));
        }
        render() {
            return html `
      <div class="content">
        <div class="slide account-setup-slide">
          <h1 class="display-medium">Select your organization.</h1>
          ${this.loading ? this.renderLoader() : this.renderForm()}
        </div>
      </div>
    `;
        }
        renderForm() {
            const { organizations = [], selected } = this;
            return html `
      <form class="org-name-form" @submit=${this.handleOrgSelection}>
        <ui-select name="org" class="org-input" required .value="${selected}">
          ${repeat(organizations, (i) => i.key, (i) => html `<ui-option value="${i.key}"
                >${i.name}
                <div slot="supporting-text">${i.key}</div></ui-option
              >`)}
        </ui-select>
        <ui-button color="filled" type="submit">Continue</ui-button>
      </form>
    `;
        }
        renderLoader() {
            return html ` <ui-progress indeterminate class="login-progress" aria-label="Setting up organization"></ui-progress> `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _selected_extraInitializers);
        }
    };
})();
/**
 * An App screen (HTML Element) allowing the user to select an organization.
 * Primary use-case is during the initial setup when no organization is selected yet.
 *
 * Note, this element does not handle the actual API logic, it only provides the UI and dispatches events.
 */
export default OrganizationSelectionScreen;
//# sourceMappingURL=OrganizationSelectionScreen.js.map