import { TreeSelect } from "antd";
import { useEffect } from "react";

const getTreeNodePaths = () => {

};
const processTreeDataByLevel = () => {

};
const processTreeDataForOnlyLastLevel = ({ data }) => {
  return data;
};
/**
 * 基础下拉树组件（不建议直接使用此组件，二次继承使用）
 */
function BasicSelectTree(props) {
  const {
    onGetData,
    onChange,
    onGetLabel,
    onGetNodePaths,
    onGetNodePathsIsIncludeOneself = true,
    placeholder = "",
    treeData = [],
    nameKey = "name",
    idKey = "id",
    childrenKey = "children",
    level,
    onlyLastLevel = false,
    ...restProps
  } = props;

  // 根据 level 处理树数据
  let processedTreeData = level
    ? processTreeDataByLevel({
        data: treeData,
        level,
        childrenKey,
        currentLevel: 1,
      })
    : treeData;

  // 根据 onlyLastLevel 处理树数据
  processedTreeData = processTreeDataForOnlyLastLevel({ data: processedTreeData, childrenKey, onlyLastLevel });

  const handleChange = (value, label, extra) => {
    if (value) {
      const parentNodes = getTreeNodePaths({
        data: treeData,
        targetId: value,
        idKey,
        childrenKey,
        isIncludeOneself: onGetNodePathsIsIncludeOneself,
      });
      onGetNodePaths?.(parentNodes);
      onGetLabel?.(parentNodes[parentNodes.length - 1][nameKey]);
    }
    else {
      onGetNodePaths?.([]);
      onGetLabel?.("");
    }
    onChange?.(value, label, extra);
  };

  useEffect(() => {
    onGetData?.(treeData, processedTreeData);
  }, [treeData, processedTreeData]);

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

BasicSelectTree.displayName = "BasicSelectTree";

export default BasicSelectTree;