<script>
  import { isEmpty } from "lodash/fp"
  import { Checkbox, Input, Select, DetailSummary } from "@budibase/bbui"
  import { selectedComponent, store } from "builderStore"
  import PropertyControl from "./PropertyControls/PropertyControl.svelte"
  import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
  import RoleSelect from "./PropertyControls/RoleSelect.svelte"
  import TableSelect from "./PropertyControls/TableSelect.svelte"
  import DataSourceSelect from "./PropertyControls/DataSourceSelect.svelte"
  import DataProviderSelect from "./PropertyControls/DataProviderSelect.svelte"
  import FieldSelect from "./PropertyControls/FieldSelect.svelte"
  import MultiFieldSelect from "./PropertyControls/MultiFieldSelect.svelte"
  import SchemaSelect from "./PropertyControls/SchemaSelect.svelte"
  import SectionSelect from "./PropertyControls/SectionSelect.svelte"
  import NavigationEditor from "./PropertyControls/NavigationEditor/NavigationEditor.svelte"
  import EventsEditor from "./PropertyControls/EventsEditor"
  import FilterEditor from "./PropertyControls/FilterEditor/FilterEditor.svelte"
  import { IconSelect } from "./PropertyControls/IconSelect"
  import ColorPicker from "./PropertyControls/ColorPicker.svelte"
  import StringFieldSelect from "./PropertyControls/StringFieldSelect.svelte"
  import NumberFieldSelect from "./PropertyControls/NumberFieldSelect.svelte"
  import OptionsFieldSelect from "./PropertyControls/OptionsFieldSelect.svelte"
  import BooleanFieldSelect from "./PropertyControls/BooleanFieldSelect.svelte"
  import LongFormFieldSelect from "./PropertyControls/LongFormFieldSelect.svelte"
  import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte"
  import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
  import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
  import { FrontendTypes } from "constants"

  export let componentDefinition
  export let componentInstance
  export let assetInstance
  export let openSection

  const layoutDefinition = []
  const screenDefinition = [
    { key: "description", label: "Description", control: Input },
    { key: "routing.route", label: "Route", control: Input },
    { key: "routing.roleId", label: "Access", control: RoleSelect },
    { key: "layoutId", label: "Layout", control: LayoutSelect },
  ]

  $: settings = componentDefinition?.settings ?? []
  $: isLayout = assetInstance && assetInstance.favicon
  $: assetDefinition = isLayout ? layoutDefinition : screenDefinition

  const updateProp = store.actions.components.updateProp
  const controlMap = {
    text: Input,
    select: Select,
    dataSource: DataSourceSelect,
    dataProvider: DataProviderSelect,
    boolean: Checkbox,
    number: Input,
    event: EventsEditor,
    table: TableSelect,
    color: ColorPicker,
    icon: IconSelect,
    field: FieldSelect,
    multifield: MultiFieldSelect,
    schema: SchemaSelect,
    section: SectionSelect,
    navigation: NavigationEditor,
    filter: FilterEditor,
    "field/string": StringFieldSelect,
    "field/number": NumberFieldSelect,
    "field/options": OptionsFieldSelect,
    "field/boolean": BooleanFieldSelect,
    "field/longform": LongFormFieldSelect,
    "field/datetime": DateTimeFieldSelect,
    "field/attachment": AttachmentFieldSelect,
    "field/link": RelationshipFieldSelect,
  }

  const getControl = type => {
    return controlMap[type]
  }

  const canRenderControl = setting => {
    const control = getControl(setting?.type)
    if (!control) {
      return false
    }
    if (setting.dependsOn && isEmpty(componentInstance[setting.dependsOn])) {
      return false
    }
    return true
  }
</script>

<DetailSummary name="Component" on:open show={openSection === "settings"}>
  <PropertyControl
    bindable={false}
    control={Input}
    label="Name"
    key="_instanceName"
    value={componentInstance._instanceName}
    onChange={val => updateProp("_instanceName", val)}
  />
  {#if settings && settings.length > 0}
    {#each settings as setting (`${componentInstance._id}-${setting.key}`)}
      {#if canRenderControl(setting)}
        <PropertyControl
          type={setting.type}
          control={getControl(setting.type)}
          label={setting.label}
          key={setting.key}
          value={componentInstance[setting.key] ??
            componentInstance[setting.key]?.defaultValue}
          {componentInstance}
          onChange={val => updateProp(setting.key, val)}
          props={{
            options: setting.options,
            placeholder: setting.placeholder,
          }}
        />
      {/if}
    {/each}
  {:else}
    <div class="text">This component doesn't have any additional settings.</div>
  {/if}
  {#if componentDefinition?.info}
    <div class="text">
      {@html componentDefinition?.info}
    </div>
  {/if}
</DetailSummary>

<style>
  .text {
    font-size: var(--spectrum-global-dimension-font-size-75);
    color: var(--grey-6);
  }
</style>
