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

import { connect } from 'pwa-helpers/connect-mixin.js'
import { store } from '../../reducer/store'

import '../../components/things-scene-viewer/things-scene-viewer'

class BoardInfo extends connect(store)(LitElement) {
  static get is() {
    return 'board-info'
  }

  static get properties() {
    return {
      page: {
        // statePath: 'route.page',
        observer: '_onPageChanged'
      },

      model: {
        type: Object,
        // statePath: 'boardCurrent.model',
        observer: '_onModelChanged'
      },

      provider: Object
    }
  }

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

        things-scene-viewer {
          flex: 1;
        }
      `
    ]
  }

  render() {
    return html``
  }

  stateChanged(state) {
    if (state.route.page != 'info') {
      this.model = null
      return
    }

    this.model = state.boardCurrent.model
  }
}

customElements.define(BoardInfo.is, BoardInfo)
