import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import '@material/web/button/elevated-button.js';
import '@material/web/textfield/filled-text-field.js';
import '@operato/i18n/ox-i18n.js';
import '@operato/i18n/ox-i18n-selector.js';
import '@operato/layout/ox-snack-bar.js';
import '../components/profile-component';
import { css, html, nothing } from 'lit';
import { property, query } from 'lit/decorators.js';
import { i18next } from '@operato/i18n';
import { AUTH_STYLE_SIGN } from '../auth-style-sign';
import { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../utils/password-rule';
import { AbstractAuthPage } from './abstract-auth-page';
export class AbstractPasswordReset extends AbstractAuthPage {
    constructor() {
        super(...arguments);
        this.passwordPattern = '';
        this.passwordHelp = '';
    }
    render() {
        var { icon, title, description } = this.applicationMeta;
        const { disableUserFavoredLanguage, languages } = this.data || {};
        return html `
      <div class="wrap">
        <div class="auth-brand">
          <img src=${icon} />
          <strong class="name">${title}</strong>
          <span class="welcome-msg">${description}</span>
        </div>

        <div class="auth-form">
          <h3><ox-i18n msgid="title.${this.title}"></ox-i18n></h3>
          <form
            id="form"
            action="${this.actionUrl}"
            method="post"
            @keypress=${e => {
            if (e.key == 'Enter')
                this._onSubmit(e);
        }}
          >
            <input name="token" type="hidden" .value=${this.token || ''} required />
            <div class="field">
              <md-filled-text-field
                name="password"
                type="password"
                label=${String(i18next.t('label.password'))}
                pattern=${this.passwordPattern || ''}
                supporting-text=${this.passwordHelp}
                autocomplete="off"
                @input=${e => {
            var val = e.target.value;
            this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'));
        }}
                required
                ><md-icon slot="leading-icon">password</md-icon></md-filled-text-field
              >
            </div>

            <div class="field">
              <md-filled-text-field
                id="confirm-password"
                name="confirm-password"
                type="password"
                label=${String(i18next.t('field.confirm password'))}
                autocomplete="off"
                required
                ><md-icon slot="leading-icon">password</md-icon></md-filled-text-field
              >
            </div>

            <md-elevated-button id="submit-button" type="submit" @click=${e => this._onSubmit(e)}>
              <ox-i18n msgid="${this.submitButtonLabel}"></ox-i18n>
            </md-elevated-button>

            ${!disableUserFavoredLanguage
            ? html ` <div id="locale-area">
                  <label for="locale-selector"><md-icon>language</md-icon></label>
                  <ox-i18n-selector
                    id="locale-selector"
                    value=${i18next.language || 'en-US'}
                    .languages=${languages}
                    @change=${e => {
                var locale = e.detail;
                if (!locale)
                    return;
                i18next.changeLanguage(locale);
            }}
                  ></ox-i18n-selector>
                </div>`
            : nothing}
          </form>
        </div>
      </div>

      <ox-snack-bar id="snackbar" level="error" .message=${this.message}></ox-snack-bar>
    `;
    }
    updated(changed) {
        super.updated(changed);
        if (changed.has('data')) {
            this.token = this.data.token;
        }
        if (changed.has('message')) {
            if (!this.message) {
                this.hideSnackbar();
            }
            else {
                this.showSnackbar({
                    timer: -1
                });
            }
        }
    }
    languageUpdated() {
        this.passwordPattern = generatePasswordPatternRegExp(this.data.passwordRule).source;
        this.passwordHelp = generatePasswordPatternHelp(this.data.passwordRule);
    }
    async submit() {
        this.formEl.submit();
    }
}
AbstractPasswordReset.styles = [
    css `
      :host {
        position: relative;
        overflow: hidden;

        display: flex;
        flex-direction: row;

        width: 100vw;
        height: 100vh;
        height: 100dvh;
      }

      @media print {
        :host {
          width: 100%;
          height: 100%;
          min-height: 100vh;
          min-height: 100dvh;
        }
      }
    `,
    AUTH_STYLE_SIGN
];
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], AbstractPasswordReset.prototype, "data", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], AbstractPasswordReset.prototype, "token", void 0);
__decorate([
    query('#confirm-password'),
    __metadata("design:type", HTMLElement)
], AbstractPasswordReset.prototype, "confirmPass", void 0);
//# sourceMappingURL=abstract-password-reset.js.map