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

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

import '@polymer/neon-animation/animations/scale-up-animation'
import '@polymer/neon-animation/animations/fade-out-animation'
import '@polymer/paper-dialog/paper-dialog'

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

import '../../layouts/page-toolbar/page-toolbar'
import '../../components/things-search-input'

import './font-card'

import { ScrollbarStyles } from '../../styles/scrolbar-styles'

export default class SettingFont extends connect(store)(localize(i18next)(LitElement)) {
  constructor() {
    super()

    this.fontList = []
    this.newFontName = ''
    this.newFontProvider = ''
    this.newFontUrl = ''
    this.keyword = ''
  }
  static get is() {
    return 'setting-font'
  }

  static get properties() {
    return {
      // statePath: 'fontList'
      fontList: Array,
      newFontName: String,
      newFontProvider: String,
      newFontUrl: String,
      keyword: String
    }
  }

  static get styles() {
    return [
      ScrollbarStyles,
      css`
        :host {
          display: flex;
          flex-direction: column;
        }

        #list {
          flex: 1;

          padding: 16px;
          margin: 0;
          overflow-y: auto;

          display: grid;

          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          grid-auto-rows: minmax(200px, 220px);
          grid-gap: 16px;
        }

        #fab {
          position: absolute;
          right: 15px;
          bottom: 15px;
        }
      `
    ]
  }

  stateChanged(state) {
    this.fontList = state.fontList
  }

  render() {
    return html`
      <page-toolbar>
        <things-search-input .value=${this.keyword} .label=${i18next.t('label.keyword')}> </things-search-input>
      </page-toolbar>

      <div id="list">
        ${this.fontList.map(
          item =>
            html`
              <font-card .font=${item}></font-card>
            `
        )}
      </div>

      <mwc-fab
        id="fab"
        direction="top"
        icon="add"
        title="add font family"
        @tap="${e => this._onTapAddFontFamily(e)}"
      ></mwc-fab>

      <paper-dialog
        id="new-font-dialog"
        entry-animation="scale-up-animation"
        exit-animation="fade-out-animation"
        @iron-overlay-closed="${e => this._onSaveNewDialogClosed(e)}"
        no-overlap
      >
        <h2><things-i18n-msg msgid="label.add-new-font-family">Add New Font Family</things-i18n-msg></h2>
        <paragraph>
          <things-i18n-msg msgid="label.pls-name-font-family">Please, give a name for the font family.</things-i18n-msg>
        </paragraph>

        <paper-input
          always-float-label
          label="Font Family"
          .value=${this.newFontName}
          @change=${e => (this.newFontName = e.target.value)}
        ></paper-input>

        <label>Provider</label>
        <select value=${this.newFontProvider} @change=${e => (this.newFontProvider = e.target.value)}>
          <option value="custom">Custom</option>
          <option value="google">Google</option>
        </select>

        <paper-input
          always-float-label
          label="Font URI"
          .value=${this.newFontUri}
          @change=${e => (this.newFontUri = e.target.value)}
        ></paper-input>

        <div class="buttons">
          <mwc-button dialog-dismiss> <things-i18n-msg msgid="button.cancel">Cancel</things-i18n-msg> </mwc-button>
          <mwc-button dialog-confirm autofocus>
            <things-i18n-msg msgid="button.accept">Accept</things-i18n-msg>
          </mwc-button>
        </div>
      </paper-dialog>
    `
  }

  createFont() {
    try {
      store.dispatch(
        createFont({
          name: this.newFontName,
          provider: this.newFontProvider || 'custom',
          uri: this.newFontUri
        })
      )
    } catch (e) {
      console.error(e)
      if (this.showToastMsg) this.showToastMsg(e)
    }
  }

  _onTapAddFontFamily() {
    this.shadowRoot.querySelector('#new-font-dialog').open()
  }

  _onSaveNewDialogClosed(e) {
    var dialog = e.target

    if (!dialog.closingReason.confirmed) {
      return
    }

    this.createFont()
  }
}

customElements.define(SettingFont.is, SettingFont)
