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

import '@material/web/icon/icon.js'
import './entity-selector.js'

import { css, html, LitElement } from 'lit'
import { customElement, property, query } from 'lit/decorators.js'

import { i18next } from '@operato/i18n'
import { openPopup } from '@operato/layout'

@customElement('things-editor-entity-selector')
export default class ThingsEditorEntitySelector extends LitElement {
  static styles = [
    css`
      :host {
        position: relative;
        display: inline-block;
      }

      input[type='text'] {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
      }

      md-icon {
        position: absolute;
        top: 0;
        right: 0;
      }

      select,
      ox-select,
      input:not([type='checkbox']) {
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 4px;
      }
    `
  ]

  @property({ type: String }) value?: string
  @property({ type: Object }) properties: any

  popup: any

  render() {
    return html`
      <input id="text" type="text" .value=${this.value || ''} @change=${e => this._onInputChanged(e)} />

      <md-icon @click=${e => this.openSelector()}>dashboard</md-icon>
    `
  }

  _onInputChanged(e) {
    e.stopPropagation()

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

  openSelector() {
    if (this.popup) {
      delete this.popup
    }

    var template = html`
      <entity-selector
        .creatable=${true}
        .queryName=${this.properties.queryName}
        .value=${this.value}
        @entity-selected=${e => {
          e.stopPropagation()

          var entity = e.detail.entity
          this.value = entity[this.properties.valueKey || 'id']

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

          this.popup && this.popup.close()
        }}
      ></entity-selector>
    `

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