import { LitElement, html, css } from 'lit-element'

import '@material/mwc-icon/mwc-icon'

import '@polymer/paper-checkbox'

import { connect } from 'pwa-helpers/connect-mixin.js'
import { store, setRoute, updateFont, deleteFont } from '../../reducer/store'
import { i18next } from '../../components/i18next'
import { localize } from '../../components/localize-mixin'
import '../../components/things-i18n-msg'

export default class FontCard extends connect(store)(localize(i18next)(LitElement)) {
  static get is() {
    return 'font-card'
  }

  static get properties() {
    return {
      font: Object,
      // statePath: 'user.locale'
      locale: String
    }
  }

  static get styles() {
    return [
      css`
        #card {
          position: relative;

          padding: 0;
          margin: 0;
          height: 100%;

          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
          -webkit-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
        }

        :host(.flipped) > #card {
          -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
        }

        #card > [front],
        #card > [back] {
          position: absolute;

          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          background: white;

          border-radius: 5px;
          background-color: #fff;
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
            0 3px 1px -2px rgba(0, 0, 0, 0.2);

          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
        }

        #card > [back] {
          -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
        }

        #info {
          padding: 10px;
        }

        h1 {
          display: inline;
          color: #212121;
          font-weight: normal;
          font-size: 0.9em;
        }

        h5 {
          margin: 0;
          font-size: 0.8em;
          font-weight: normal;
          color: #757575;
        }

        p {
          margin: 0;
          display: inline;
          font-size: 0.7em;
          color: #757575;
        }

        img {
          display: block;
          height: 88%;
          max-width: 100%;
          margin: auto;
        }

        div.name {
          position: absolute;
          width: 100%;
          bottom: 0;
          padding: 0 10px 0 10px;
          background: lightgray;
          box-sizing: border-box;
        }

        mwc-icon {
          position: absolute;
          color: gray;
          bottom: 3px;
          right: 3px;
          padding: 5px;
          border-radius: 50%;

          --mdc-icon-size: 1em;
        }

        mwc-icon[delete] {
          color: red;
          right: 30px;
        }

        mwc-icon:hover {
          background-color: darkgray;
          color: white;
        }
      `
    ]
  }

  constructor() {
    super()

    this.font = {}
  }

  stateChanged(state) {
    this.locale = state.auth.locale
  }

  render() {
    return html`
      <div id="card">
        <div front>
          <h2>
            <font
              .face=${this.font.name}>ABCDEFGHIJKLMNOPQRSTUVWXYZ</font>
          </h2>
          <h2>
            <font
              .face=${this.font.name}>abcdefghijklmnopqrstuvwxyz</font>
          </h2>
          <div class="name">
            <h1>${this.font.name}</h1>
            <p>${this.font.provider}</p>
            <mwc-icon
              @click=${e => this._onClickFlip(e)} 
              flip>redo
            </mwc-icon>
          </div>
        </div>
      
        <div back>
          <div id="info">
            
            <h5>
              <things-i18n-msg msgid="label.created-at"></things-i18n-msg>
              ${this._toDateString(this.font.createdAt, this.locale)}
            </h5>
            <h5>
              <things-i18n-msg msgid="label.updated-at"></things-i18n-msg>
              ${this._toDateString(this.font.updatedAt, this.locale)}
            </h5>
      
            <paper-input
              .label=${i18next.t('label.name')} 
              .value=${this.font.name} 
              @change=${e => this._onChangeName(e)}>
            </paper-input>
            
            <label>
              <things-i18n-msg msgid="label.provider"></things-i18n-msg>
            </label>
            <select
              .value=${this.font.provider} 
              @change=${e => {
                this.font.provider = e.target.value
              }}>
              <option value="custom">Custom</option>
              <option value="google">Google</option>
            </select>
      
            <br>

            <paper-checkbox
              ?checked=${this.font.active}
              @change=${e => {
                this.font.active = e.target.checked
              }}">
              ${i18next.t('label.active')}
            </paper-checkbox>
          </div>
      
          <div class="name">
            <h1>${this.font.name}</h1>
            <p>${this.font.description}</p>

            <mwc-icon
              @click=${e => this._onClickDelete(e)} 
              delete>delete
            </mwc-icon>
            <mwc-icon
              @click=${e => this._onClickFlip(e)} 
              flip>undo
            </mwc-icon>
          </div>
        </div>
      </div>
    `
  }

  _onClickDelete(e) {
    store.dispatch(deleteFont(this.font))
    e.stopPropagation()
  }

  _onClickFlip(e) {
    this.classList.toggle('flipped')
    e.stopPropagation()
  }

  _onChangeName(e) {
    var input = e.target

    store.dispatch(
      updateFont({
        id: this.font.id,
        name: input.value
      })
    )
    e.stopPropagation()
  }

  _onChangeDescription(e) {
    var input = e.target
    store.dispatch(
      updateFont({
        id: this.font.id,
        description: input.value
      })
    )
    e.stopPropagation()
  }

  _toDateString(t, locale) {
    return t ? new Date(Number(t)).toLocaleString(locale) : ''
  }
}

customElements.define(FontCard.is, FontCard)
