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

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 './publisher-card'

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

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

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

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

  static get properties() {
    return {
      publisherList: 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;
        }
      `
    ]
  }

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

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

customElements.define(SettingPublisher.is, SettingPublisher)
