import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import '@material/web/button/elevated-button.js';
import '@operato/lottie-player';
import { css, html, LitElement } from 'lit';
import { customElement, property, state } 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 = [];
        this.searchValue = '';
        this.DOMAIN_SEARCH_LENGTH = 5;
    }
    render() {
        var _a, _b;
        var { icon, title, description } = this.applicationMeta;
        const showDomainSearch = ((_a = this.domains) === null || _a === void 0 ? void 0 : _a.length) >= this.DOMAIN_SEARCH_LENGTH;
        return html `
      <div class="content md-typescale-display-medium">
        <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>

          ${html `
            <input
              search-input
              ?visible=${showDomainSearch}
              type="text"
              placeholder=${i18next.t('label.search_domain')}
              .value=${this.searchValue}
              @input=${e => (this.searchValue = e.target.value)}
            />
          `}
          ${((_b = this.domains) === null || _b === void 0 ? void 0 : _b.length)
            ? html `
                <ul class="domains">
                  ${this.domains.map(domain => {
                // 도메인이 5개 이상이면 검색 필터링 처리
                if (showDomainSearch &&
                    this.searchValue &&
                    !domain.name.toLowerCase().includes(this.searchValue.toLowerCase()) &&
                    !domain.description.toLowerCase().includes(this.searchValue.toLowerCase())) {
                    return html ``;
                }
                return html `
                      <li
                        @click=${() => (location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(this.redirectTo || '/')}`)}
                      >
                        <md-icon>keyboard_arrow_right</md-icon>
                        <strong>${domain.name}</strong>
                        <span>${domain.description}&nbsp;</span>
                      </li>
                    `;
            })}
                </ul>
              `
            : html ` <h3>${i18next.t('text.no domain available')}</h3> `}

          <div class="button-container">
            <md-elevated-button @click=${() => (location.pathname = '/auth/signout')}
              >${String(i18next.t('button.logout'))}</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>
      </div>
    `;
    }
    updated(changed) {
        if (changed.has('data')) {
            this.domains = this.data.domains;
            this.user = this.data.user;
            this.domainTypes = this.data.domainTypes;
            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(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
        height: 100vh;
        height: 100dvh;
      }

      .header {
        background-color: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
        height: var(--checkin-header-height);
      }

      .content {
        flex: 1;
        overflow: auto;
      }

      .domains {
        margin: var(--spacing-large) 0;
        padding: 0;
        background-color: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
        border-radius: var(--border-radius);
        border: var(--border-dim-color);
        list-style: none;
      }

      li {
        border-bottom: var(--border-dim-color);
        padding: var(--spacing-medium) var(--spacing-large);
        font-size: 18px;
        text-align: left;

        cursor: pointer;
      }

      li:hover {
        background-color: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
      }

      li span {
        display: block;
        font: normal var(--fontsize-default) var(--theme-font);
      }

      li md-icon {
        float: right;
        margin: 10px 0 0 0;
        opacity: 0.5;
      }

      .button-container {
        text-align: center;
      }

      .button-container md-elevated-button {
        margin-left: var(--spacing-small);
      }

      input[search-input] {
        width: 250px;
        height: 35px;
        margin-top: 10px;
        border-radius: 5px;
        padding: 3px 10px;
        font-size: 17px;
        color: var(--md-sys-color-primary);
        background: var(--md-sys-color-surface);
        border: var(--border-dim-color);
        font-weight: 500;
        display: none;
      }

      input[search-input][visible] {
        display: inline-block;
      }

      @media (max-width: 450px) {
        .button-container md-elevated-button {
          width: 100%;
          margin: var(--spacing-medium) 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: Array }),
    __metadata("design:type", Array)
], AuthCheckIn.prototype, "domainTypes", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], AuthCheckIn.prototype, "user", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], AuthCheckIn.prototype, "searchValue", void 0);
AuthCheckIn = __decorate([
    customElement('auth-checkin')
], AuthCheckIn);
export { AuthCheckIn };
//# sourceMappingURL=checkin.js.map