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'
import '../../layouts/page-toolbar/page-toolbar'

class BoardViewer extends connect(store)(LitElement) {
  constructor() {
    super()

    this.model = null
    this.board = ''
    this.provider = null
  }

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

  static get properties() {
    return {
      model: Object,
      board: String,
      provider: Object
    }
  }

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

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

  render() {
    return html`
      <page-toolbar>
        <label>${this.board && this.board.name}</label> <span>${(this.board && this.board.description) || ''}</span>
      </page-toolbar>

      <things-scene-viewer id="scene" name="viewer" .model=${this.model} .provider=${this.provider} fit="ratio">
      </things-scene-viewer>
    `
  }

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

    if (this.board !== state.boardCurrent) {
      this.model = state.boardCurrent.model
      this.board = state.boardCurrent
    }
  }
}

customElements.define(BoardViewer.is, BoardViewer)
