import { __esDecorate, __runInitializers } from "tslib";
import { html, LitElement, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { consume } from '@lit/context';
import { userContext } from '../../../providers/user.js';
let OrganizationCreateScreen = (() => {
    let _classSuper = LitElement;
    let _user_decorators;
    let _user_initializers = [];
    let _user_extraInitializers = [];
    let _loading_decorators;
    let _loading_initializers = [];
    let _loading_extraInitializers = [];
    let _organization_decorators;
    let _organization_initializers = [];
    let _organization_extraInitializers = [];
    let _reason_decorators;
    let _reason_initializers = [];
    let _reason_extraInitializers = [];
    return class OrganizationCreateScreen extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _user_decorators = [property({ type: Object, attribute: false }), consume({ context: userContext, subscribe: true })];
            _loading_decorators = [property({ type: Boolean })];
            _organization_decorators = [property({ type: String })];
            _reason_decorators = [property({ type: String })];
            __esDecorate(this, null, _user_decorators, { kind: "accessor", name: "user", static: false, private: false, access: { has: obj => "user" in obj, get: obj => obj.user, set: (obj, value) => { obj.user = value; } }, metadata: _metadata }, _user_initializers, _user_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, _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, _reason_decorators, { kind: "accessor", name: "reason", static: false, private: false, access: { has: obj => "reason" in obj, get: obj => obj.reason, set: (obj, value) => { obj.reason = value; } }, metadata: _metadata }, _reason_initializers, _reason_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #user_accessor_storage = __runInitializers(this, _user_initializers, void 0);
        /**
         * The current user information.
         *
         * This property consumes the `userContext`.
         */
        get user() { return this.#user_accessor_storage; }
        set user(value) { this.#user_accessor_storage = value; }
        /**
         * Computed user name for welcome message.
         */
        get userName() {
            return this.user?.name || '';
        }
        /**
         * Computed intro message based on the reason for creating the organization.
         */
        get introMessage() {
            if (this.reason === 'setup') {
                // eslint-disable-next-line max-len
                return 'Start with adding an organization to your account. Each organization you create has separate billing, teams, and APIs.';
            }
            return 'Each organization you create has separate billing, teams, and APIs.';
        }
        #loading_accessor_storage = (__runInitializers(this, _user_extraInitializers), __runInitializers(this, _loading_initializers, false
        /**
         * The user-entered organization name. Can be set to pre-fill the input field.
         * @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; }
        #organization_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _organization_initializers, void 0));
        /**
         * The user-entered organization name. Can be set to pre-fill the input field.
         * @attribute
         */
        get organization() { return this.#organization_accessor_storage; }
        set organization(value) { this.#organization_accessor_storage = value; }
        #reason_accessor_storage = (__runInitializers(this, _organization_extraInitializers), __runInitializers(this, _reason_initializers, 'setup'));
        /**
         * The reason for creating the organization, affecting the welcome message.
         *
         * Possible values are:
         * - 'setup': for initial setup
         * - 'add': for adding an additional organization
         *
         * @attribute
         */
        get reason() { return this.#reason_accessor_storage; }
        set reason(value) { this.#reason_accessor_storage = value; }
        handleFormSubmit(e) {
            e.preventDefault();
            const form = e.target;
            const organization = String(form.organization.value).trim();
            if (!organization) {
                return;
            }
            this.setupOrganization(organization);
        }
        setupOrganization(organization) {
            this.organization = organization;
            this.dispatchEvent(new CustomEvent('create', {
                detail: { organization },
                bubbles: false,
                composed: false,
            }));
        }
        handleCancel() {
            if (this.reason !== 'add') {
                return;
            }
            this.dispatchEvent(new CustomEvent('cancel', {
                bubbles: false,
                composed: false,
            }));
        }
        render() {
            return html `
      <div class="content">
        <div class="slide account-setup-slide">
          ${this.renderWelcomeMessage()} ${this.loading ? this.renderLoader() : this.renderForm()}
        </div>
      </div>
    `;
        }
        renderWelcomeMessage() {
            const tagline = this.reason === 'setup' ? 'Setup your first organization' : 'Add another organization';
            return html `
      <h1 class="display-medium">Welcome ${this.userName}.</h1>
      <p class="title-large">${tagline}.</p>
    `;
        }
        renderForm() {
            return html `
      <p class="body-medium">${this.introMessage}</p>
      ${this.renderOrganizationInput()} ${this.renderInvitationInfo()}
    `;
        }
        renderInvitationInfo() {
            if (this.reason !== 'setup') {
                return nothing;
            }
            return html `<p class="body-small">
      Expected to join an organization? Click on the registration link in the invitation email to get started.
    </p>`;
        }
        renderOrganizationInput() {
            const { organization = '' } = this;
            return html `
      <form class="org-name-form" @submit=${this.handleFormSubmit}>
        <ui-outlined-text-field
          label="Organization name"
          name="organization"
          autocomplete="organization"
          required
          class="org-input"
          .value="${organization}"
        ></ui-outlined-text-field>
        <ui-button class="next" color="filled" type="submit">Next</ui-button>
        ${this.renderCancelButton()}
      </form>
    `;
        }
        renderCancelButton() {
            if (this.reason !== 'add') {
                return nothing;
            }
            return html `<ui-button class="cancel" color="text" type="button" @click="${this.handleCancel}">Cancel</ui-button>`;
        }
        renderLoader() {
            return html ` <ui-progress indeterminate class="login-progress" aria-label="Creating organization"></ui-progress> `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _reason_extraInitializers);
        }
    };
})();
/**
 * An App screen (HTML Element) allowing the user to create a new organization during the setup process.
 *
 * Note, this element does not handle the actual API logic, it only provides the UI and dispatches events.
 *
 * @fires create - Dispatched when the user submits the form with a valid organization name.
 *                 The event detail contains `{ organization: string }`.
 * @fires cancel - Dispatched when the user cancels the operation (only available when `reason` is 'add').
 *
 * @example
 * ```html
 * <organization-create-screen
 *   reason="setup"
 *   @create="${this.handleCreate}"
 * ></organization-create-screen>
 * ```
 */
export default OrganizationCreateScreen;
//# sourceMappingURL=OrganizationCreateScreen.js.map