// SearchableSelect.tsx

import React from 'react';
import { Form, type SelectProps } from 'antd';
import { CloseCircleFilled } from '@ant-design/icons';
import type { RuleObject } from 'rc-field-form/lib/interface';
import SelectDropdown from './SelectDropdown';
import { DefaultOptionType } from 'antd/es/select';
type RuleConfig = RuleObject

interface SearchableSelectProps {
  mode?: 'multiple' | 'tags';
  options: Array<{ value: number | string; label: string }>;
  onSelect?: (value: string | number | null | undefined, option: DefaultOptionType | DefaultOptionType[]) => void;
  isSearchable?: boolean;
  name: string | number | (string | number)[];
  label?: string;
  rules?: RuleConfig[] | undefined;
  defaultValue?: { value: number | string; label: string };
  value?: { value: number | string; label: string } | undefined;
  placeholder?: string;
  extra?: string | React.ReactNode;
  allowClear?: boolean;
  [key: string]: unknown;
}

const InputSelect: React.FC<SearchableSelectProps & SelectProps> = ({
  name,
  onSearch,
  label,
  rules,
  options,
  onSelect,
  defaultValue,
  isSearchable = false,
  placeholder,
  extra,
  allowClear = true,
  ...selectProps
}) => {
  return (
    <Form.Item label={label} name={name} rules={rules} extra={extra} {...selectProps}>
      <SelectDropdown
        options={options}
        showSearch={isSearchable}
        allowClear={allowClear}
        defaultValue={defaultValue}
        onSearch={onSearch} // Call the onSearch prop when the user types
        onChange={onSelect}
        placeholder={placeholder} // Use the placeholder prop here
        clearIcon={<button><CloseCircleFilled /></button>}
        {...selectProps} />

    </Form.Item>
  );
};

export default InputSelect;