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

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

import '@things-shell/board-viewer'
import '../../layouts/page-toolbar/page-toolbar'

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

    this.board = ''
    this.provider = null
    this.scene = null

    this.forward = []
    this.backward = []
  }

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

  static get properties() {
    return {
      board: Object,
      board$: Object
    }
  }

  static get styles() {
    return [
      css`
        :host {
          display: flex;
          flex-direction: column;
          width: 100%; /* 전체화면보기를 위해서 필요함. */
          overflow: hidden;
        }

        board-viewer {
          flex: 1;
          width: 100%; /* 전체화면보기를 위해서 필요함. */
        }
      `
    ]
  }

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

      <board-viewer .board=${this.board$} .provider=${this.provider}></board-viewer>
    `
  }

  stateChanged(state) {
    if (state.route.page !== 'viewer') {
      this.board$ = null
      this.board = state.boardCurrent

      return
    }

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

customElements.define(BoardViewerPage.is, BoardViewerPage)
