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

import { connect } from 'pwa-helpers/connect-mixin.js'
import { store } 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 './file-card'
import FileImporter from './file-importer'

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

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

    this.fileList = []
    this.keyword = ''
  }

  static get is() {
    return 'setting-file'
  }

  static get properties() {
    return {
      // statePath: 'fileList'
      fileList: Array,
      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;
        }
      `
    ]
  }

  firstUpdated() {
    FileImporter.set(this.shadowRoot.getElementById('list'))
  }

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

  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.fileList.map(
          item =>
            html`
              <file-card .file=${item}></file-card>
            `
        )}
      </div>
    `
  }
}

customElements.define(SettingFile.is, SettingFile)
