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

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

export default class BoardPreview extends LitElement {
  static get is() {
    return 'board-preview'
  }

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

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

        things-scene-viewer {
          flex: 1;
          background-color: white;
        }
      `
    ]
  }
  render() {
    return html`
      <things-scene-viewer name="preview" id="scene" .model=${this.model} .provider=${this.provider} fit="ratio">
      </things-scene-viewer>
    `
  }

  firstUpdated() {
    dispatchEvent(new Event('resize'))
  }

  disconnectedCallback() {
    super.disconnectedCallback()

    this.model = null
  }
}

customElements.define(BoardPreview.is, BoardPreview)
