import '@material/web/icon/icon.js'

import { css, html, LitElement, nothing } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { connect } from 'pwa-helpers/connect-mixin'

import { store } from '@operato/shell'
import { ScrollbarStyles } from '@operato/styles'

@customElement('domain-switch')
export class DomainSwitch extends connect(store)(LitElement) {
  static styles = [
    ScrollbarStyles,
    css`
      :host {
        display: flex;
        max-width: 100%;
        background-color: var(--md-sys-color-primary-container, rgb(215 231 241));
        border-bottom: var(--border-dim-color);
      }

      :host * {
        vertical-align: middle;
      }

      div {
        flex: 1;
        display: flex;
        flex-direction: row;
        padding: var(--spacing-small);
      }

      md-icon {
        background-color: var(--md-sys-color-primary, rgb(46 121 190));
        margin-right: var(--spacing-small);
        padding: 2px;
        border-radius: 50%;
        font-size: var(--fontsize-large);
        color: var(--md-sys-color-on-primary, rgba(255,255,255,.9));
      }
      span,
      select {
        flex: 1;
        color: var(--md-sys-color-on-primary-container, rgb(50 66 82));
        font: bold 14px/20px var(--theme-font);
      }

      select {
        border: none;
        background-color: transparent;
      }

      select:focus {
        outline: 0;
      }
      :host([dark]) {
        background-color: rgba(0, 0, 0, 0.2);
        padding: 0 !important;
        border-bottom: none;
      }
      :host([dark]) md-icon {
        background-color: var(--secondary-text-color);
        margin: 1px 4px 0px 0px;
        padding: 1px 2px;
        border-radius: 50%;
        line-height: 19px;
      }
      :host([dark]) span,
      :host([dark]) select {
        color: var(--md-sys-color-on-primary);
        font: bold 13px/13px var(--theme-font);
      }
      :host([dark]) option {
        background-color: var(--primary-color, #585858);
        color: var(--md-sys-color-on-primary, #fff);
      }
      :host([dark]) span {
        line-height: 23px;
      }

      :host([rounded-corner]) {
        height: 30px;
        border-radius: 20px;
        border: var(--border-dim-color);
      }
      :host([rounded-corner]) div {
        padding: var(--spacing-small) var(--spacing-medium);
      }
    `
  ]

  @property({ type: Array }) domains: any[] = []
  @property({ type: Object }) domain: any
  @property({ type: String, attribute: true }) attrname: string = 'name'
  @property({ type: String, attribute: true }) icon?: string

  render() {
    const domains = this.domains || []
    const domain = this.domain || {}
    const attrname = this.attrname || 'name'

    return html`
      <div>
        ${this.icon ? html`<md-icon>${this.icon}</md-icon>` : nothing}
        ${domains.length <= 1
          ? html` <span>${domains[0]?.[attrname] || domain.name}</span> `
          : html`
              <select
                .value=${domain.subdomain}
                @change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}
              >
                ${domains.map(
                  d => html`
                    <option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d[attrname]}</option>
                  `
                )}
              </select>
            `}
      </div>
    `
  }

  stateChanged(state) {
    this.domains = state.app.domains
    this.domain = state.app.domain
  }
}
