import { css, html } from 'lit'

import { BoardModellerPage } from '@things-factory/board-ui'

export class AppBoardModellerPage extends BoardModellerPage {
  static get styles() {
    return [...BoardModellerPage.styles, css``]
  }

  static get properties() {
    return {
      boardPermissions: Array
    }
  }

  renderBrandingZone() {
    return html``
  }

  updated(changes) {
    if (this.boardPermissions?.includes('Modeller')) {
      super.updated(changes)
    } else {
      this.boardId = null
      this.model = null
      this.modeller?.close()
    }
  }

  stateChanged(state) {
    super.stateChanged(state)

    this.boardPermissions = state.permissions.boardPermissions
  }
}

customElements.define('app-board-modeller-page', AppBoardModellerPage)
