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

import '@material/mwc-icon'
import './camera-calibration-popup'

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

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

const ZEROS = new Array(9).fill(0)

export class CameraCalibrationEditor extends OxPropertyEditor {
  static get styles() {
    return [
      ...OxPropertyEditor.styles,
      css`
        :host {
          margin-top: 20px;
        }

        [matrix] {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          column-gap: 4px;
          row-gap: 4px;
        }

        [coeff] {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          column-gap: 4px;
          row-gap: 4px;
        }

        input {
          min-width: 100px;
        }

        mwc-button {
          display: block;
          text-align: center;
        }
      `
    ]
  }

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

  editorTemplate(props) {
    var { distortionCoefficient = [], cameraMatrix = {} } = this.value || {}

    var { rows = 3, columns = 3, data = [...ZEROS] } = cameraMatrix
    var cameraMatrixData = [...(data || []), ...ZEROS].slice(0, 9)
    var distCoeffData = [...distortionCoefficient, ...ZEROS].slice(0, 5)

    return html`
      <div>
        <label>distortion coefficients</label>
        <div coeff @change=${e => this.onchange(e)}>
          ${distCoeffData.map(value => html` <input type="number" value=${value} /> `)}
        </div>

        <label>camera matrix</label>
        <div matrix @change=${e => this.onchange(e)}>
          ${cameraMatrixData.map(value => html` <input type="number" value=${value} /> `)}
        </div>

        <mwc-button @click=${e => this.openCameraCalibration()}>${i18next.t('text.camera calibration')}</mwc-button>
      </div>
    `
  }

  onchange(e) {
    var coeffInputs = this.renderRoot.querySelectorAll('[coeff] input')
    var cameraMatrixInputs = this.renderRoot.querySelectorAll('[matrix] input')

    this.value = {
      distortionCoefficient: Array.from(coeffInputs).map(input => input.value),
      cameraMatrix: {
        rows: 3,
        columns: 3,
        data: Array.from(cameraMatrixInputs).map(input => input.value)
      }
    }

    e.stopPropagation()

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

  async openCameraCalibration() {
    if (this.popup) {
      delete this.popup
    }

    const confirmCallback = newval => {
      this.value = newval
      this.dispatchEvent(
        new CustomEvent('change', {
          bubbles: true,
          composed: true,
          detail: this.value
        })
      )
    }

    /* 
      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
      layout의 구성에 변화가 발생하면, 다시 render된다.
      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
    */
    var template = html`
      <camera-calibration-popup .value=${this.value} .host=${this.host} .confirmCallback=${confirmCallback}>
      </camera-calibration-popup>
    `

    this.popup = openPopup(template, {
      backdrop: true,
      size: 'large',
      title: i18next.t('text.camera calibration')
    })
  }
}

customElements.define('camera-calibration-editor', CameraCalibrationEditor)
