import type { BaseElementProps, BaseOption } from './types';
import type { SelectProps } from 'antd';
import { Form, Select as AntSelect } from 'antd';
import type { FC } from 'react';
import { useMemo } from 'react';

const { Item: FormItem } = Form;

type ElementProps = {
  options: BaseOption[];
};

function Select({
  value = null,
  setValue,
  options = [],
  status,
  validateStatus,
  help,
  ...props
}: BaseElementProps<string | null> & ElementProps) {
  const optionsWithNull = useMemo(
    () => [
      {
        label: 'Не выбрано',
        value: null,
      },
      ...options,
    ],
    [options]
  );

  return (
    <FormItem hasFeedback help={help} validateStatus={validateStatus}>
      <AntSelect
        disabled={status === 'Disabled'}
        loading={status === 'Loading'}
        onChange={setValue}
        optionFilterProp="children"
        options={optionsWithNull}
        value={value}
        {...props}
      />
    </FormItem>
  );
}

export default Select as FC<SelectProps>;
