import { __decorate, __metadata } from "tslib";
import '@material/web/button/outlined-button.js';
import '@material/web/textfield/filled-text-field.js';
import { css, html, LitElement } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { i18next } from '@operato/i18n';
function capitalize(str) {
    return str ? str.charAt(0).toUpperCase() + str.slice(1) : '';
}
let CreateUser = class CreateUser extends LitElement {
    render() {
        return html `
      <md-filled-text-field
        type="text"
        name="username"
        label=${capitalize(i18next.t('label.user-id'))}
        pattern="^(?:[A-Za-z0-9]*|[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,})$"
        ><md-icon slot="leading-icon">badge</md-icon></md-filled-text-field
      >

      <md-filled-text-field
        type="text"
        name="name"
        label=${capitalize(i18next.t('label.x name', { x: i18next.t('label.user') }))}
        ><md-icon slot="leading-icon">id_card</md-icon></md-filled-text-field
      >

      <md-filled-text-field type="email" name="email" label=${capitalize(i18next.t('field.email'))}
        ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
      >

      <md-outlined-button @click=${this.onCreateUser.bind(this)}
        >${capitalize(i18next.t('button.create'))}</md-outlined-button
      >
    `;
    }
    async onCreateUser() {
        try {
            if (!this.usernameInput.value) {
                throw new Error(i18next.t('error.value is empty', { value: 'name' }));
            }
            if (!this.emailInput.checkValidity()) {
                throw new Error(i18next.t('error.not valid pattern of type', { type: 'e-mail' }));
            }
            if (!this.nameInput.value) {
                throw new Error(i18next.t('error.value is empty', { value: 'name' }));
            }
            const user = {
                username: this.usernameInput.value.trim(),
                name: this.nameInput.value.trim(),
                email: this.emailInput.value.trim()
            };
            await this.dispatchEvent(new CustomEvent('create-user', { detail: user }));
            this.usernameInput.value = '';
            this.nameInput.value = '';
            this.emailInput.value = '';
        }
        catch (e) {
            document.dispatchEvent(new CustomEvent('notify', {
                detail: {
                    level: 'error',
                    message: 'message' in e ? e.message : e
                }
            }));
        }
    }
};
CreateUser.styles = css `
    :host {
      --md-text-field-fill-color: var(--md-sys-color-on-primary);
      background-color: var(--md-sys-color-surface);
      margin: var(--spacing-large) 0;
      padding: var(--spacing-large);
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);

      display: grid;
      grid-template-columns: 1fr 2fr 2fr auto;
      gap: 5px 15px;
      clear: both;
      max-width: var(--input-container-max-width);

      align-items: center;
    }

    md-outlined-button {
      margin: var(--input-margin);
    }

    @media screen and (max-width: 480px) {
      :host {
        grid-template-columns: 1fr 1fr;
      }

      md-outlined-button {
        grid-column: span 2;

        margin: var(--input-margin);
      }
    }
  `;
__decorate([
    query('[name=name]'),
    __metadata("design:type", HTMLInputElement)
], CreateUser.prototype, "nameInput", void 0);
__decorate([
    query('[name=username]'),
    __metadata("design:type", HTMLInputElement)
], CreateUser.prototype, "usernameInput", void 0);
__decorate([
    query('[name=email]'),
    __metadata("design:type", HTMLInputElement)
], CreateUser.prototype, "emailInput", void 0);
CreateUser = __decorate([
    customElement('create-user')
], CreateUser);
//# sourceMappingURL=create-user.js.map