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

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

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

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

  static get properties() {
    return {
      file: Object,
      // statePath: 'auth.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.file = {}
  }

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

  render() {
    return html`
      <div id="card">
        <div front>
          <img src="${this._thumbnail(this.file)}" />
          <div class="name">
            <h1>${this.file.name}</h1>
            <p>${this.file.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.file.createdAt,
                this.locale
              )}
            </h5>
            <h5>
              <things-i18n-msg msgid="label.updated-at"></things-i18n-msg> ${this._toDateString(
                this.file.updatedAt,
                this.locale
              )}
            </h5>

            <a href="${this._toURL(this.file)}"> <h3>${this.file.filename}</h3> </a>
          </div>

          <div class="name">
            <h1>${this.file.name}</h1>
            <p>${this.file.mimetype}</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(deleteFile(this.file))
    e.stopPropagation()
  }

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

  _thumbnail(file) {
    const type = file.mimetype && file.mimetype.split('/')[0]
    if (type == 'image') {
      return this._toURL(file)
    }
    return 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
  }

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

  _toURL(file) {
    return `file/${file.path}`
  }
}

customElements.define(PublisherCard.is, PublisherCard)
