import { Select } from "antd";
import { ProSelectProps } from "./types";

const { Option } = Select;

/*
 * use this component in modals instead of ProSelector
 * , because overriding "getPopupContainer" to solve the scrolling problem causes the selector to go above the select input
 * */

const ProInModalSelect = ({
  optionList,
  valueField = "id",
  displayField = "name",
  fixedPosition,
  spreadOptionProps,
  ...rest
}: ProSelectProps) => (
  <Select
    
    // listItemHeight={4}
    listHeight={150}
    {...rest}
    {...(fixedPosition
      ? { getPopupContainer: (trigger) => trigger.parentNode }
      : {})}
  >
    {optionList && Array.isArray(optionList)
      ? optionList.map((option) => (
          <Option
            value={option[valueField]}
            key={option[valueField]}
            {...(spreadOptionProps ? { ...option } : {})}
          >
            {option[displayField]}
          </Option>
        ))
      : null}
  </Select>
);
export default ProInModalSelect;