import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import '@material/web/button/elevated-button.js';
import '@operato/i18n/ox-i18n.js';
import '@operato/layout/ox-snack-bar.js';
import '@operato/lottie-player';
import '../../components/contact-us';
import { css, html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { i18next, localize } from '@operato/i18n';
let AuthActivate = class AuthActivate extends localize(i18next)(LitElement) {
    render() {
        var { icon, title, description } = this.applicationMeta;
        return html `
      <div class="wrap">
        <div class="auth-brand">
          <img src=${icon} />
          <strong class="name">${title}</strong>
          <span class="welcome-msg">${description}</span>
        </div>

        <h1><ox-i18n msgid="text.your account is not activated"></ox-i18n></h1>

        <!--description message container-->
        <p></p>

        <form
          id="form"
          action="/auth/resend-verification-email"
          method="POST"
          @submit=${e => {
            this.requestResend(e);
        }}
          hidden
        >
          <input name="email" type="hidden" .value=${this.email || ''} required />
          <button id="submit-button" type="submit"><ox-i18n msgid="label.change password"></ox-i18n></button>
        </form>

        <div id="button-area">
          <md-elevated-button @click=${e => this.requestResend(e)}>
            <md-icon slot="icon">mail_outline</md-icon>
            ${i18next.t('label.send activation email')}
          </md-elevated-button>
          <md-elevated-button
            @click=${e => {
            window.location.replace('/auth/signin');
        }}
          >
            <md-icon slot="icon">home</md-icon>
            ${i18next.t('button.go to home')}
          </md-elevated-button>
        </div>
        <contact-us></contact-us>

        <!--lottie animation begin-->
        <div class="lottie-container">
          <lottie-player autoplay loop src="../../assets/images/background-animation.json"></lottie-player>
        </div>
        <!--lottie animation end-->
      </div>

      <ox-snack-bar id="snackbar"></ox-snack-bar>
    `;
    }
    get applicationMeta() {
        if (!this._applicationMeta) {
            var iconLink = document.querySelector('link[rel="application-icon"]');
            var titleMeta = document.querySelector('meta[name="application-name"]');
            var descriptionMeta = document.querySelector('meta[name="application-description"]');
            this._applicationMeta = {
                icon: iconLink === null || iconLink === void 0 ? void 0 : iconLink.href,
                title: titleMeta ? titleMeta.content : 'Things Factory',
                description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
            };
        }
        return this._applicationMeta;
    }
    firstUpdated() {
        var searchParams = new URLSearchParams(window.location.search);
        this.email = searchParams.get('email');
    }
    updated(changed) {
        var _a;
        if (changed.has('data')) {
            this.email = (_a = this.data) === null || _a === void 0 ? void 0 : _a.email;
        }
    }
    async requestResend(e) {
        var timer;
        var formData = new FormData(this.form);
        var button = e.target;
        try {
            var controller = new AbortController();
            var signal = controller.signal;
            button.disabled = true;
            timer = setTimeout(() => {
                controller.abort();
                throw new Error('timeout');
            }, 30 * 1000);
            var response = await fetch('/auth/resend-verification-email', {
                credentials: 'include',
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(Object.fromEntries(formData.entries())),
                signal
            });
            if (response) {
                this.showSnackbar({
                    level: response.ok ? 'info' : 'error',
                    message: await response.text()
                });
            }
        }
        catch (e) {
        }
        finally {
            button.disabled = false;
            clearTimeout(timer);
        }
    }
    showSnackbar({ level, message, timer = 3000 }) {
        const snackbar = this.renderRoot.querySelector('#snackbar');
        snackbar.level = level;
        snackbar.message = message;
        snackbar.active = true;
        if (timer > -1)
            setTimeout(() => {
                snackbar.active = false;
            }, timer);
    }
};
AuthActivate.styles = [
    css `
      :host {
        display: flex;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background-color: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
      }

      .wrap {
        display: block;
        width: 450px;
        min-width: 350px;
        margin: 0 auto;
        text-align: center;
      }

      .auth-brand {
        color: #fff;
      }

      .auth-brand img {
        margin: 15% auto 5px auto;
        width: 100px;
        border: 3px solid var(--md-sys-color-on-primary);
        border-radius: 25px;
        box-shadow: var(--box-shadow);
      }

      .name {
        display: block;
        font: var(--auth-brand-name);
        text-shadow: var(--auth-brand-name-shadow);
      }

      h1 {
        margin: 50px 0 0 0;
        padding: 0;
        font-size: 24px;
        color: var(--auth-title-color, var(--md-sys-color-on-primary));
      }

      p {
        margin: 0;
        padding: var(--auth-description-padding);
        font: var(--auth-description-font);
        color: var(--auth-description-color, var(--md-sys-color-on-secondary));
      }

      #button-area {
        border-top: 1px dashed #ccc;
        padding-top: 10px;
      }

      md-elevated-button {
        --md-elevated-button-horizontal-padding: var(--spacing-medium);
        --md-elevated-button-ink-color: var(--md-sys-color-primary);
      }

      contact-us {
        display: flex;
        padding: 50px;
        flex-direction: column;
      }

      .lottie-container {
        width: 100%;
        height: 300px;
        position: absolute;
        left: 0;
        bottom: 0;
        pointer-events: none;
      }

      .lottie-container lottie-player {
        position: absolute;
        bottom: -6%;
        width: 100%;
        height: auto;
      }

      @media (max-width: 450px) {
        .wrap {
          width: 85%;
          min-width: 320px;
          padding-bottom: 100px;
        }

        .auth-form {
          grid-template-columns: 1fr;
        }

        .auth-brand img {
          margin: 12% auto 5px auto;
          width: 75px;
        }

        .lottie-container {
          overflow: hidden;
          height: 200px;
          pointer-events: none;
        }

        .lottie-container lottie-player {
          width: 1200px;
          left: -30%;
        }
      }
    `
];
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], AuthActivate.prototype, "data", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", Object)
], AuthActivate.prototype, "email", void 0);
__decorate([
    query('#form'),
    __metadata("design:type", HTMLFormElement)
], AuthActivate.prototype, "form", void 0);
AuthActivate = __decorate([
    customElement('auth-activate')
], AuthActivate);
export { AuthActivate };
//# sourceMappingURL=activate.js.map