import { TreeSelect } from "antd";
import { getTreeNodePaths } from "../../../utils";

function BasicSelectTree(props) {
  const {
    onSelect,
    onGetNodePaths,
    onGetNodePathsIsIncludeOneself = true,
    placeholder = "",
    treeData = [],
    nameKey = "name",
    idKey = "id",
    childrenKey = "childrenList",
    ...restProps
  } = props;

  const handleSelect = (value, node, extra) => {
    if (value.length > 0) {
      const parentNodes = getTreeNodePaths({
        data: treeData,
        targetId: value,
        idKey,
        childrenKey,
        isIncludeOneself: onGetNodePathsIsIncludeOneself
      });
      onGetNodePaths?.(parentNodes);
    }
    onSelect?.(value, node, extra);
  };

  return (
    <TreeSelect
      showSearch
      style={{ width: "100%" }}
      styles={{
        popup: { root: { maxHeight: 400, overflow: "auto" } },
      }}
      placeholder={`请选择${placeholder}`}
      onSelect={handleSelect}
      allowClear
      treeData={treeData}
      fieldNames={{ label: nameKey, value: idKey, children: childrenKey }}
      {...restProps}
    />
  );
}

BasicSelectTree.displayName = "BasicSelectTree";

export default BasicSelectTree;