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'

@customElement('auth-checkin')
export class AuthCheckIn extends localize(i18next)(LitElement) {
  static 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
  ]

  @property({ type: Object }) data: any
  @property({ type: Array }) domains: any[] = []
  @property({ type: String }) domainType?: string
  @property({ type: Object }) user: any

  private _applicationMeta?: { icon?: string; title?: string; description?: string }
  private redirectTo?: string

  render() {
    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>

          ${this.domains?.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>

            ${this.domainType?.toLowerCase() === 'company'
              ? html`<mwc-button
                  raised
                  label=${String(i18next.t('button.register business domain'))}
                  @click=${e => (location.href = `/public/business-register?email=${this.user?.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: HTMLLinkElement | null = document.querySelector('link[rel="application-icon"]')
      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name="application-name"]')
      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name="application-description"]')

      this._applicationMeta = {
        icon: iconLink?.href,
        title: titleMeta ? titleMeta.content : 'Things Factory',
        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
      }
    }

    return this._applicationMeta
  }
}
