/**
 * 이 클래스는 camera 의 설정을 위한 에디터로 동작한다.
 */

import { LitElement, html, css } from 'lit-element'
import { ThingsEditorProperty, ThingsEditorPropertyStyles } from '@things-factory/modeller-ui'

import '../component/robot-arm-pose-list-input'
import '../component/robot-arm-controller'

export class PoseProgramEditor extends ThingsEditorProperty {
  static get styles() {
    return [ThingsEditorPropertyStyles]
  }

  static get properties() {
    return {
      value: Object,
      host: Object
    }
  }

  editorTemplate(props) {
    var poses = (this.value instanceof Array ? this.value : []).map(pose => pose?.pose || {})
    var { connection } = this.host

    return html`
      <div fullwidth>
        <robot-arm-pose-list-input .value=${this.value} .connection=${connection}></robot-arm-pose-list-input>
        <robot-arm-controller .connection=${connection} .program=${poses}></robot-arm-controller>
      </div>
    `
  }
}

customElements.define('pose-program-editor', PoseProgramEditor)
