import { LitElement, html, css } from 'lit-element'
import { property } from '../../commons/decorators'

import { connect } from 'pwa-helpers/connect-mixin.js'
import { store, createBoard } from '../../reducer/store'
import { i18next } from '../../components/i18next'
import { localize } from '../../components/localize-mixin'

import '../../components/things-i18n-msg'
import '../../components/things-sortable/things-sortable'

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

import BoardCard from './board-card'
import BoardImporter from './board-importer'

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

class BoardList extends connect(store)(localize(i18next)(LitElement)) {
  constructor() {
    super()

    this.boardList = []
    this.group = {}
    this.keyword = ''
  }

  static get is() {
    return 'board-list'
  }

  static get properties() {
    return {
      // statePath: 'boardList'
      boardList: Array,
      // statePath: 'boardGroupCurrent'
      group: Object,
      keyword: String
    }
  }

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

        #list {
          flex: 1;

          display: flex;
          flex-direction: row;
        }

        things-sortable {
          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;
        }
      `
    ]
  }

  stateChanged(state) {
    this.boardList = state.boardList
    this.group = state.boardGroupCurrent
  }

  updated(change) {
    change.has('group') && this.onChangeGroup(this.group)
  }

  firstUpdated() {
    BoardImporter.set(
      this.shadowRoot.getElementById('list'),
      () => this.group && this.group.type == 'group',
      (name, model) => {
        store.dispatch(
          createBoard({
            name,
            description: 'imported',
            model: model,
            width: model.width,
            height: model.height,
            thumbnail: 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
            group: this.group.id
          })
        )
      }
    )
  }

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

      <div id="list">
        <things-sortable .group=${this.group.id} ?disabled=${this.group.type !== 'playGroup'}>
          ${this.boardList.map(
            item => html`
              <board-card .board=${item} @dragstart="${e => this.onDragStart(e)}"> </board-card>
            `
          )}
        </things-sortable>
      </div>
    `
  }

  onChangeGroup(e) {
    var cards = this.shadowRoot.querySelectorAll('.flipped')

    Array.from(cards).forEach(card => {
      card.classList.toggle('flipped')
    })
  }

  onDragStart(e) {
    var card = e.target

    if (!(card instanceof BoardCard)) return

    e.dataTransfer.setDragImage(card, 0, -10)
    e.dataTransfer.setData('board', card.board.id)
  }
}

customElements.define(BoardList.is, BoardList)
