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

import '@material/mwc-button'

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

import { OxPropertyEditor } from '@operato/property-editor'
import { i18next } from '@things-factory/i18n-base'

export class HandEyeConfigEditor extends OxPropertyEditor {
  static get styles() {
    return [
      ...OxPropertyEditor.styles,
      css`
        :host {
          margin-top: 20px;
        }
        [matrix] {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          column-gap: 4px;
          row-gap: 4px;
        }
        [modeselect] {
          display: flex;
          flex-direction: column;
        }
        [autohandeye] {
          display: flex;
          flex-direction: column;
        }
      `
    ]
  }

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

  editorTemplate(props) {
    return html`
      <div>
        <div modeselect @change=${e => this.onchange(e)}>
          <label for="handeyeMode">${i18next.t('text.handeye mode')}</label>
          <select id="handeyeMode" .value=${this.value?.mode || 'hand-to-eye'}>
            <option value="hand-to-eye" ?selected=${this.value?.mode === 'hand-to-eye'}>
              ${i18next.t('text.hand to eye')}
            </option>
            <option value="hand-in-eye" ?selected=${this.value?.mode === 'hand-in-eye'}>
              ${i18next.t('text.hand in eye')}
            </option>
          </select>
        </div>
        <div autohandeye @change=${e => this.onchange(e)}>
          <label for="autoTotalIter">${i18next.t('text.auto-handeye total iterations')}</label>
          <input id="autoTotalIter" type="number" .value=${this.value?.autoTotalIter || 30} />
          <label for="autoMoveXyz">${i18next.t('text.auto-handeye move xyz')}</label>
          <input id="autoMoveXyz" type="number" .value=${this.value?.autoMoveXyz || 0.05} />
          <label for="autoMoveUvw">${i18next.t('text.auto-handeye move uvw')}</label>
          <input id="autoMoveUvw" type="number" .value=${this.value?.autoMoveUvw || 10} />
        </div>
      </div>
    `
  }

  onchange(e) {
    var handeyeMode = this.renderRoot.getElementById('handeyeMode').value
    var autoTotalIter = this.renderRoot.getElementById('autoTotalIter').value
    var autoMoveXyz = this.renderRoot.getElementById('autoMoveXyz').value
    var autoMoveUvw = this.renderRoot.getElementById('autoMoveUvw').value

    console.log(this.value)

    this.value = {
      mode: handeyeMode,
      autoTotalIter,
      autoMoveXyz,
      autoMoveUvw
    }

    e.stopPropagation()

    this.dispatchEvent(
      new CustomEvent('change', {
        bubbles: true,
        detail: this.value
      })
    )
  }
}

customElements.define('handeye-config-editor', HandEyeConfigEditor)
