/*
 * Copyright © HatioLab Inc. All rights reserved.
 */

import './things-editor-entity-selector.js'

import { html } from 'lit'
import { customElement } from 'lit/decorators.js'
import cloneDeep from 'lodash-es/cloneDeep.js'

import { OxPropertyEditor } from '@operato/property-editor'

@customElement('property-editor-entity-selector')
export class PropertyEditorEntitySelector extends OxPropertyEditor {
  static get styles() {
    return [...OxPropertyEditor.styles]
  }

  editorTemplate(value, spec) {
    return html`
      <things-editor-entity-selector
        id="editor"
        .value=${value}
        .properties=${spec.property}
      ></things-editor-entity-selector>
    `
  }

  shouldUpdate(changedProperties) {
    return true
  }

  get valueProperty() {
    return 'value'
  }

  _computeLabelId(label) {
    if (label.indexOf('label.') >= 0) return label

    return 'label.' + label
  }

  _valueChanged(e) {
    e.stopPropagation()

    this.value = cloneDeep(e.target[this.valueProperty])

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

    this.observe?.call(this, this.value)
  }
}