import { OxGristEditor } from '@operato/data-grist'
import { html } from 'lit'

const EMPTY_OPTION = { name: '', value: '' }

export class DynamicSelector extends OxGristEditor {
  options: any

  async getOptions(): Promise<{ name: string; description: string }[]> {
    return []
  }

  async firstUpdated() {
    super.firstUpdated()

    var { options } = this.column.record || []

    if (!options) {
      var dynamic: any = await this.getOptions()
      if (dynamic.unshift) {
        dynamic.unshift(EMPTY_OPTION)
      } else {
        dynamic = [EMPTY_OPTION]
      }

      this.column.record.options = dynamic
      this.requestUpdate()
    }
  }

  get editorTemplate() {
    var { options = [EMPTY_OPTION] } = this.column.record || {}

    return html`
      <select>
        ${options.map(option => html` <option ?selected=${option.name == this.value} value=${option.name}>${option.name}</option> `)}
      </select>
    `
  }
}