import { CloseCircleOutlined } from "@ant-design/icons";
import { Select } from "antd";

/**
 * 可创建选项的选择器组件
 */
function SelectCreate(props) {
  const {
    items,
    showDelete = true,
    label = "",
    maxCount = 1,
    onDelete,
    formValues,
    ...restProps
  } = props;

  const handlerDelete = (option) => {
    onDelete?.(option);
  };

  return (
    <Select
      mode="tags"
      maxCount={maxCount}
      placeholder={`请选择${label}，无对应选项可直接输入创建选项`}
      optionRender={option => (
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span>{option.label}</span>
          {
            showDelete && (
              <CloseCircleOutlined
                style={{ marginRight: 10 }}
                onClick={(e) => {
                  e.stopPropagation();
                  handlerDelete(option);
                }}
              />
            )
          }
        </div>
      )}
      {...restProps}
    >
      {
        items.map(item => (
          <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
        ))
      }
    </Select>
  );
}

export default SelectCreate;