import React from 'react';
import Select, { Props as SelectProps, GroupBase } from 'react-select';
import Creatable from 'react-select/creatable';
import Async from 'react-select/async';

export type Option = { label: string; value: string };

export type SelectSingleProps = SelectProps<Option, false, GroupBase<Option>>;
export type SelectMultiProps = SelectProps<Option, true, GroupBase<Option>>;

export function SelectSingle(props: SelectSingleProps) {
  return <Select {...props} isMulti={false} />;
}

export function MultiSelect(props: SelectMultiProps) {
  return <Select {...props} isMulti />;
}

export type CreatableSelectProps = SelectProps<Option, true, GroupBase<Option>>;

export function TagsSelect(props: CreatableSelectProps) {
  return <Creatable {...props} isMulti />;
}

export type AsyncSelectProps = React.ComponentProps<typeof Async<Option, false, GroupBase<Option>>> & {
  isMulti?: boolean;
};

export function AsyncSelect(props: AsyncSelectProps) {
  return <Async {...props} />;
}