/*
 * Copyright © HatioLab Inc. All rights reserved.
 */
import './things-editor-http-headers.js'
import './things-editor-http-parameters.js'
import './things-editor-http-body.js'
import './things-editor-db-procedure.js'
import './things-editor-tag-scenarios.js'

import { html } from 'lit'

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

export class PropertyEditorScenarioStepInput extends OxPropertyEditor {
  static get styles() {
    return [...OxPropertyEditor.styles]
  }

  editorTemplate(value, spec) {
    /* context must be a datagrid(grist) instance, and host must be a record */
    const { context: grid, host: record } = spec
    const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []

    return html`
      <input id="editor" .value=${value || ''} list="step-list" />
      <datalist id="step-list">${steps.map(id => html` <option value=${id}></option> `)}</datalist>
    `
  }
}

customElements.define('property-editor-scenario-step-input', PropertyEditorScenarioStepInput)

export class PropertyEditorHttpHeaders extends OxPropertyEditor {
  static get styles() {
    return [...OxPropertyEditor.styles]
  }

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

customElements.define('property-editor-http-headers', PropertyEditorHttpHeaders)

export class PropertyEditorHttpParameters extends OxPropertyEditor {
  static get styles() {
    return [...OxPropertyEditor.styles]
  }

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

customElements.define('property-editor-http-parameters', PropertyEditorHttpParameters)

export class PropertyEditorHttpBody extends OxPropertyEditor {
  static get styles() {
    return [...OxPropertyEditor.styles]
  }

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

customElements.define('property-editor-http-body', PropertyEditorHttpBody)

export class PropertyEditorProcedureParameters extends OxPropertyEditor {
  static get styles() {
    return [...OxPropertyEditor.styles]
  }

  editorTemplate(value, spec) {
    /* context must be a datagrid(grist) instance, and host must be a record */
    const { context: grid, host: record } = spec
    const { dbtype = 'oracle' } = spec.property || {}

    const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []

    return html`
      <things-editor-db-procedure
        id="editor"
        .value=${value}
        .properties=${spec.property}
        .steps=${steps}
        .dbtype=${dbtype}
        fullwidth
      ></things-editor-db-procedure>
    `
  }
}

customElements.define('property-editor-procedure-parameters', PropertyEditorProcedureParameters)

export class PropertyEditorTagScenarios extends OxPropertyEditor {
  static get styles() {
    return [...OxPropertyEditor.styles]
  }

  editorTemplate(value, spec) {
    /* context must be a datagrid(grist) instance, and host must be a record */
    const { context: grid, host: record } = spec
    const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []

    return html`
      <things-editor-tag-scenarios
        id="editor"
        .value=${value}
        .properties=${spec.property}
        .steps=${steps}
        fullwidth
      ></things-editor-tag-scenarios>
    `
  }
}

customElements.define('property-editor-tag-scenarios', PropertyEditorTagScenarios)