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

/**
 * Input definition for a taglist input.
 * @public
 */
export const taglist: FormKitProInput = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: outer(
    wrapper(
      label('$label'),
      inner(
        icon('prefix'),
        prefix(),
        tags(
          tagWrapper(
            tag(
              $if(
                '$state.loading',
                tagLoading('$ui.isLoading.value'),
                tagLabel('$option.label')
              ),
              removeSelection(icon('close'))
            )
          ),
          input()
        ),
        $if('$state.loading', icon('loader')),
        listboxButton(icon('select')),
        listbox(),
        suffix(),
        icon('suffix')
      )
    ),
    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'),
  ],
}