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 { ScrollbarStyles } from '../../styles/scrolbar-styles'

class SettingSecurity extends connect(store)(localize(i18next)(LitElement)) {
  static get is() {
    return 'setting-security'
  }

  static get properties() {
    return {
      keyword: String
    }
  }

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

        things-tree {
          flex: 1;
        }
      `
    ]
  }

  stateChanged(state) {}

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

customElements.define(SettingSecurity.is, SettingSecurity)
