<script>
  import { getContext } from "svelte"
  import { Label, DatePicker, Input, Select, Toggle } from "@budibase/bbui"
  import Dropzone from "./attachments/Dropzone.svelte"
  import LinkedRowSelector from "./LinkedRowSelector.svelte"
  import { capitalise } from "./helpers"

  const { styleable, screenStore, API } = getContext("sdk")
  const component = getContext("component")

  export let wide = false

  let row
  let schema
  let fields = []

  $: getContextDetails($component.dataContext)

  const getContextDetails = async dataContext => {
    if (dataContext) {
      row = dataContext
      const tableDefinition = await API.fetchTableDefinition(row.tableId)
      schema = tableDefinition.schema
      fields = Object.keys(schema)
    }
  }
</script>

<div class="form-content" use:styleable={$component.styles}>
  <!--  <ErrorsBox errors={$store.saveRowErrors || {}} />-->
  {#each fields as field}
    <div class="form-field" class:wide>
      {#if !(schema[field].type === 'boolean' && !wide)}
        <Label extraSmall={!wide} grey>{capitalise(schema[field].name)}</Label>
      {/if}
      {#if schema[field].type === 'options'}
        <Select secondary bind:value={row[field]}>
          <option value="">Choose an option</option>
          {#each schema[field].constraints.inclusion as opt}
            <option>{opt}</option>
          {/each}
        </Select>
      {:else if schema[field].type === 'datetime'}
        <DatePicker bind:value={row[field]} />
      {:else if schema[field].type === 'boolean'}
        <Toggle
          text={wide ? null : capitalise(schema[field].name)}
          bind:checked={row[field]} />
      {:else if schema[field].type === 'number'}
        <Input type="number" bind:value={row[field]} />
      {:else if schema[field].type === 'string'}
        <Input bind:value={row[field]} />
      {:else if schema[field].type === 'attachment'}
        <Dropzone bind:files={row[field]} />
      {:else if schema[field].type === 'link'}
        <LinkedRowSelector
          secondary
          showLabel={false}
          bind:linkedRows={row[field]}
          schema={schema[field]} />
      {/if}
    </div>
  {/each}
</div>

<style>
  .form {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .form-content {
    display: grid;
    gap: var(--spacing-xl);
    width: 100%;
  }

  .form-field {
    display: grid;
  }
  .form-field.wide {
    align-items: center;
    grid-template-columns: 20% 1fr;
    gap: var(--spacing-xl);
  }
  .form-field.wide :global(label) {
    margin-bottom: 0;
  }
</style>
