import { __decorate, __metadata } from "tslib";
import '@material/web/button/elevated-button.js';
import '@operato/lottie-player';
import '../../components/profile-component';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { i18next, localize } from '@operato/i18n';
import { isSafari } from '@operato/utils';
let AuthResult = class AuthResult extends localize(i18next)(LitElement) {
    updated(changed) {
        if (changed.has('data')) {
            this.message = this.data.message;
            this.resultType = this.data.resultType || 'congratulations';
        }
    }
    render() {
        var { icon, title, description } = this.applicationMeta;
        return html `
      <div class="wrap ${this.resultType}">
        <div class="auth-brand">
          <img src=${icon} />
          <strong class="name">${title}</strong>
          <span class="welcome-msg">${description}</span>
        </div>

        <div id="message-area">
          <h1>${this.message || ''}</h1>

          <!--description message container-->
          <p></p>
        </div>
        <div id="button-area">
          <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>

        ${isSafari()
            ? html ``
            : html `
              <div class="lottie-container">
                <lottie-player autoplay loop src="../../assets/images/background-animation.json"></lottie-player>
              </div>
            `}
      </div>
    `;
    }
    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;
    }
};
AuthResult.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));
      }
      :host *:focus {
        outline: none;
      }
      .user {
        background: url(/assets/images/icon-profile.png) center top no-repeat;
        margin: var(--profile-icon-margin);
        padding: 180px 20px 20px 20px;
        color: var(--md-sys-color-secondary);
        font: var(--header-bar-title);
        text-align: center;
      }

      label {
        font: bold 14px var(--theme-font);
        color: var(--md-sys-color-primary);
      }

      #button-area {
        border-top: 1px dashed rgba(0, 0, 0, 0.1);
        padding-top: 10px;
      }

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

      .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)
], AuthResult.prototype, "data", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], AuthResult.prototype, "message", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], AuthResult.prototype, "resultType", void 0);
AuthResult = __decorate([
    customElement('auth-result')
], AuthResult);
export { AuthResult };
//# sourceMappingURL=result.js.map