var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { UmbInviteUserRepository } from '../../repository/invite-user.repository.js';
import { css, html, customElement } from '../../../../../../external/lit/index.js';
import { UmbTextStyles } from '../../../../../core/style/index.js';
import { UmbModalBaseElement } from '../../../../../core/modal/index.js';
let UmbInviteUserModalElement = class UmbInviteUserModalElement extends UmbModalBaseElement {
    #inviteUserRepository = new UmbInviteUserRepository(this);
    async #onSubmit(e) {
        e.preventDefault();
        const form = e.target;
        if (!form)
            return;
        const isValid = form.checkValidity();
        if (!isValid)
            return;
        const formData = new FormData(form);
        const name = formData.get('name');
        const email = formData.get('email');
        //TODO: How should we handle pickers forms?
        const userGroupPicker = form.querySelector('#userGroups');
        const userGroupUniques = userGroupPicker?.selection.map((unique) => {
            return { unique };
        });
        const message = formData.get('message');
        // TODO: figure out when to use email or username
        const { error } = await this.#inviteUserRepository.invite({
            name,
            email,
            userName: email,
            message,
            userGroupUniques,
        });
        if (!error) {
            this._submitModal();
        }
    }
    render() {
        return html `<uui-dialog-layout headline="Invite User">
			${this.#renderForm()}
			<uui-button @click=${this._rejectModal} slot="actions" label="Cancel" look="secondary"></uui-button>
			<uui-button
				form="InviteUserForm"
				slot="actions"
				type="submit"
				label="Send invite"
				look="primary"
				color="positive"></uui-button
		></uui-dialog-layout>`;
    }
    #renderForm() {
        return html ` <p style="margin-top: 0">
				Invite new users to give them access to Umbraco. An invite email will be sent to the user with information on
				how to log in to Umbraco. Invites last for 72 hours.
			</p>
			<uui-form>
				<form id="InviteUserForm" name="form" @submit="${this.#onSubmit}">
					<uui-form-layout-item>
						<uui-label id="nameLabel" slot="label" for="name" required>Name</uui-label>
						<uui-input id="name" label="name" type="text" name="name" required></uui-input>
					</uui-form-layout-item>
					<uui-form-layout-item>
						<uui-label id="emailLabel" slot="label" for="email" required>Email</uui-label>
						<uui-input id="email" label="email" type="email" name="email" required></uui-input>
					</uui-form-layout-item>
					<uui-form-layout-item>
						<uui-label id="userGroupsLabel" slot="label" for="userGroups" required>User group</uui-label>
						<span slot="description">Add groups to assign access and permissions</span>
						<umb-user-group-input id="userGroups" name="userGroups"></umb-user-group-input>
					</uui-form-layout-item>
					<uui-form-layout-item>
						<uui-label id="messageLabel" slot="label" for="message" required>Message</uui-label>
						<uui-textarea id="message" label="message" name="message" required></uui-textarea>
					</uui-form-layout-item>
				</form>
			</uui-form>`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				width: 100%;
			}

			uui-input {
				width: 100%;
			}

			uui-textarea {
				--uui-textarea-min-height: 100px;
			}
		`,
    ]; }
};
UmbInviteUserModalElement = __decorate([
    customElement('umb-invite-user-modal')
], UmbInviteUserModalElement);
export { UmbInviteUserModalElement };
export default UmbInviteUserModalElement;
