import { __decorate, __metadata } from "tslib";
import '@material/mwc-button';
import '@material/mwc-icon';
import '@operato/lottie-player';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { i18next, localize } from '@operato/i18n';
import { ScrollbarStyles } from '@operato/styles';
import { isSafari } from '@operato/utils';
import { AUTH_STYLE_SIGN } from '../../auth-style-sign';
let AuthCheckIn = class AuthCheckIn extends localize(i18next)(LitElement) {
    constructor() {
        super(...arguments);
        this.domains = [];
    }
    render() {
        var _a, _b;
        var { icon, title, description } = this.applicationMeta;
        return html `
      <div class="content">
        <div class="wrap">
          <div class="auth-brand">
            <img src=${icon || ''} />
            <strong class="name">${title}</strong>
            <span class="welcome-msg">${description}</span>
          </div>

          <h3>${i18next.t('label.select_domain')}</h3>

          ${((_a = this.domains) === null || _a === void 0 ? void 0 : _a.length)
            ? html `
                <ul class="domains">
                  ${this.domains.map(domain => html `
                      <li
                        @click=${() => (location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(this.redirectTo || '/')}`)}
                      >
                        <mwc-icon>keyboard_arrow_right</mwc-icon>
                        <strong>${domain.name}</strong>
                        <span>${domain.description}</span>
                      </li>
                    `)}
                </ul>
              `
            : html ` <h3>${i18next.t('text.no domain available')}</h3> `}

          <div class="button-container">
            <mwc-button
              raised
              label=${String(i18next.t('button.logout'))}
              @click="${() => (location.pathname = '/auth/signout')}"
            ></mwc-button>

            ${((_b = this.domainType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'company'
            ? html `<mwc-button
                  raised
                  label=${String(i18next.t('button.register business domain'))}
                  @click=${e => { var _a; return (location.href = `/public/business-register?email=${(_a = this.user) === null || _a === void 0 ? void 0 : _a.email}`); }}
                ></mwc-button> `
            : ''}
          </div>

          ${isSafari()
            ? html ``
            : html `
                <div class="lottie-container">
                  <lottie-player autoplay loop src="../../assets/images/background-animation.json"></lottie-player>
                </div>
              `}
        </div>
      </div>
    `;
    }
    updated(changed) {
        if (changed.has('data')) {
            this.domains = this.data.domains;
            this.user = this.data.user;
            this.domainType = this.data.domainType;
            this.redirectTo = this.data.redirectTo;
            this.requestUpdate();
        }
    }
    navigateToUrl(url) {
        location.pathname = url;
    }
    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;
    }
};
AuthCheckIn.styles = [
    ScrollbarStyles,
    css `
      :host {
        display: flex;
        flex-direction: column;
        margin: auto;
        background-color: var(--auth-background);
        height: 100vh;
        height: 100dvh;
      }
      .header {
        background-color: var(--primary-color);
        height: var(--checkin-header-height);
      }
      .content {
        flex: 1;
        overflow: auto;
      }

      .domains {
        margin: var(--margin-wide) 0;
        padding: 0;
        background-color: var(--theme-white-color);
        border-radius: var(--border-radius);
        border: var(--border-dark-color);
        list-style: none;
      }
      li {
        border-bottom: var(--border-dark-color);
        margin-bottom: -1px;
        padding: var(--padding-default) var(--padding-wide);
        font-size: 18px;
        color: var(--secondary-color);
        text-align: left;

        cursor: pointer;
      }
      li:hover {
        background-color: rgba(var(--primary-color-rgb), 0.2);
      }
      li span {
        display: block;
        font: normal var(--fontsize-default) var(--theme-font);
        color: var(--secondary-text-color);
      }
      li mwc-icon {
        float: right;
        margin: 2px 0 0 0;
        opacity: 0.5;
      }
      .button-container {
        text-align: center;
      }
      .button-container mwc-button {
        margin-left: var(--margin-narrow);
      }

      @media (max-width: 450px) {
        .button-container mwc-button {
          width: 100%;
          margin: var(--margin-default) 0 0 0;
        }
      }
    `,
    AUTH_STYLE_SIGN
];
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], AuthCheckIn.prototype, "data", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], AuthCheckIn.prototype, "domains", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], AuthCheckIn.prototype, "domainType", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], AuthCheckIn.prototype, "user", void 0);
AuthCheckIn = __decorate([
    customElement('auth-checkin')
], AuthCheckIn);
export { AuthCheckIn };
//# sourceMappingURL=checkin.js.map