import { DownOutlined } from "@ant-design/icons";
import { Select } from "antd";
import { ProSelectProps } from "./types";

export default function ProSelect({
  optionList,
  valueField = "id",
  displayField = "name",
  autoComplete,
  showDialog,
  ref,
  defaultOpen = false,
  ...rest
}: ProSelectProps) {
  return (
    <>
      <Select
        listHeight={150}
        getPopupContainer={(trigger) => trigger.parentNode} // to fix calender scrolling with page
        {...rest}
        {...(autoComplete
          ? { showSearch: true, optionFilterProp: "children" }
          : {})}
        {...(ref ? { ref } : {})}
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
          if (e.detail === 2 && showDialog) {
            showDialog();
          }
        }}
        defaultOpen={defaultOpen}
        options={optionList?.map((o) => ({
          value: o[valueField],
          key: o[valueField],
          label: o[displayField],
        }))}
        showSearch
        suffixIcon={<DownOutlined style={{ marginRight: 10 }} />}
      />
    </>
  );
}