import { default as dropdownFeature } from '../features/dropdown'
import { default as autocompleteFeature } from '../features/autocompletes'
import { default as taglistFeature } from '../features/taglist'
import {
  dropdownKeyHandler,
  dropdownDisplayHandler,
  getSelections,
  setSelectedOption,
} from '../features/dropdownFeatures'
import { options, defaultIcon, localize } from '@formkit/inputs'
import { FormKitProInput } from '@formkit/pro'
import {
  outer,
  wrapper,
  inner,
  label,
  prefix,
  selection,
  option,
  optionLoading,
  suffix,
  help,
  messages,
  message,
  listbox,
  icon,
  input,
  listboxButton,
  removeSelection,
  selections,
} from '../sections/autocompleteSections'
import { $if } from '../compose'

/**
 * Input definition for a autocomplete input.
 * @public
 */
export const autocomplete: FormKitProInput = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: outer(
    wrapper(
      label('$label'),
      inner(
        icon('prefix'),
        prefix(),
        input(),
        $if(
          '$multiple !== true && $selectionAppearance === option',
          selections(
            selection(
              option(
                $if(
                  '$state.loading',
                  optionLoading('$ui.isLoading.value'),
                  '$option.label'
                )
              ),
              removeSelection(icon('close'))
            )
          )
        ),
        $if('$state.loading', icon('loader')),
        listboxButton(icon('select')),
        listbox(),
        suffix(),
        icon('suffix')
      ),
      $if(
        '$multiple && $selectionAppearance === option',
        selections(
          selection(
            option(
              $if(
                '$state.loading',
                optionLoading('$ui.isLoading.value'),
                '$option.label'
              )
            ),
            removeSelection(icon('close'))
          )
        )
      )
    ),
    help('$help'),
    messages(message('$message.value'))
  ),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: 'input',
  /**
   * In the dropdown family of inputs.
   */
  family: 'dropdown',
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * Additional features that make this input work.
   */
  features: [
    options,
    taglistFeature,
    dropdownFeature(
      dropdownKeyHandler,
      dropdownDisplayHandler(getSelections, setSelectedOption)
    ),
    autocompleteFeature(getSelections),
    defaultIcon('select', 'select'),
    defaultIcon('close', 'close'),
    defaultIcon('selected', 'check'),
    defaultIcon('loader', 'spinner'),
    localize('isLoading'),
    localize('loadMore'),
  ],
}