import { Select } from "antd";
import { getLabelName } from "../../../utils";

/**
 * 基础下拉组件（不建议直接使用此组件，二次继承使用）
 */
function BasicSelect(props) {
  const {
    onGetLabel,
    placeholder = "",
    data = [],
    nameKey = "name",
    idKey = "id",
    ...restProps
  } = props;

  // const handleSelect = (event) => {
  //   onGetLabel?.(getLabelName({ list: data, status: event, idKey, nameKey }));
  // };
  //
  // const handleClear = () => {
  //   onGetLabel?.(undefined);
  // };

  const handleChange = (event) => {
    if (event)
      onGetLabel?.(getLabelName({ list: data, status: event, idKey, nameKey }));
    else
      onGetLabel?.(undefined);
  }

  return (
    // <Select placeholder={`请选择${placeholder}`} showSearch allowClear onClear={handleClear} onSelect={handleSelect} {...restProps}>
    <Select placeholder={`请选择${placeholder}`} showSearch allowClear onChange={handleChange} {...restProps}>
      {data.map((item) => {
        const value = item[idKey];
        const label = item[nameKey];
        return (
          <Select.Option key={value} value={value}>
            {label}
          </Select.Option>
        );
      })}
    </Select>
  );
}

BasicSelect.displayName = "BasicSelect";

export default BasicSelect;