import React from 'react';
import doc from './doc.mdx?raw';
import AutoComplete from '@digigov/ui/form/AutoComplete';
import { suggest } from '@digigov/ui/form/AutoComplete/utils';

export default {
  title: 'Digigov UI/form/AutoComplete',
  component: AutoComplete,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'AutoComplete',
};

export const WithControls = {
  render: (args) => {
    return (
      <AutoComplete
        defaultValue={args.defaultValue}
        key={args.multiple ? 'multiple' : 'single'}
        id={args.id}
        width={args.width}
        multiple={args.multiple}
        autoselect={args.autoselect}
        placeholder={args.placeholder}
        hint={args.hint}
        minLength={args.minLength}
        source={suggest}
      />
    );
  },
  args: {
    width: 'full',
    id: 'autocomplete-id',
    autoselect: false,
    multiple: false,
    hint: false,
    placeholder: '',
    minLength: 2,
    numberOfSelected: 2,
    defaultValue: '',
  },
  argTypes: {
    width: {
      control: {
        type: 'select',
        options: ['25%', '33.3%', '50%', '66.6%', '75%', '100%', 'full'],
      },
    },
    id: {
      control: { type: 'text' },
    },
    autoselect: {
      control: { type: 'boolean' },
      if: { arg: 'multiple', eq: false },
    },
    multiple: {
      control: { type: 'boolean' },
      if: { arg: 'autoselect', eq: false },
    },
    hint: {
      control: { type: 'boolean' },
    },
    placeholder: {
      control: { type: 'text' },
      if: { arg: 'hint', eq: false },
    },
    minLength: {
      control: { type: 'number' },
    },
    numberOfSelected: {
      control: { type: 'select', options: [2, 1, 3, 'all', undefined] },
      if: { arg: 'multiple', eq: true },
    },
    defaultValue: {
      control: { type: 'text' },
    },
  },
  parameters: {
    controls: {
      exclude: [
        'tStatusResults',
        'tStatusNoResults',
        'tStatusQueryTooShort',
        'tStatusSelectedOption',
        'tNoResults',
        'tAssistiveHint',
        'templates',
        'name',
        'onConfirm',
        'confirmOnBlur',
        'required',
        'source',
      ],
    },
  },
};

export { Default } from '@digigov/ui/form/AutoComplete/__stories__/Default';
export { Multiple } from '@digigov/ui/form/AutoComplete/__stories__/Multiple';
export { MultipleWithDefaultValues } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithDefaultValues';
export { MultipleShowingTwoSelected } from '@digigov/ui/form/AutoComplete/__stories__/MultipleShowingTwoSelected';
export { MultipleWithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength';
export { WithAutoSelect } from '@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect';
export { WithDefaultValue } from '@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue';
export { WithCustomValue } from '@digigov/ui/form/AutoComplete/__stories__/WithCustomValue';
export { WithHint } from '@digigov/ui/form/AutoComplete/__stories__/WithHint';
export { WithPlaceHolder } from '@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder';
export { WithShowAllValues } from '@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues';
export { WithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/WithMinLength';