import React, { useEffect, useState } from "react";
import OuiPicker from "@/components/oui-picker/oui-picker";
import OuiPickerItem from "@/components/oui-picker/oui-picker-item/oui-picker-item";
import useUpdateEffect from "@/components/utils/hook/use-update-effect";

interface OuiRelationPickerProps {
  visible?: boolean;
  onMaskClick?: Function;
  data: any[];
  labelField?: string;
  valueField?: string;
  childrenField?: string;
  onChange?: Function;
  onCancel?: Function;
  onConfirm?: Function;
}

function OuiRelationPicker({
  visible = false,
  onMaskClick = () => {},
  data,
  labelField = "label",
  valueField = "value",
  childrenField = "children",
  onChange = () => {},
  onCancel = () => {},
  onConfirm = () => {},
}: OuiRelationPickerProps) {
  const [convertedData, setConvertedData] = useState<any[]>([]);

  const [selectedIndex, setSelectedIndex] = useState<any[]>([]);

  // 计算单个树节点最大深度的函数
  const calculateSingleTreeDepth = (node: any | null): number => {
    if (node === null) {
      return 0;
    }
    if (!node[childrenField] || node[childrenField].length === 0) {
      return 1;
    }
    let maxChildDepth = 0;
    for (const child of node[childrenField]) {
      const childDepth = calculateSingleTreeDepth(child);
      maxChildDepth = Math.max(maxChildDepth, childDepth);
    }
    return maxChildDepth + 1;
  };

  // 计算整个树结构（根节点为数组）最大深度的函数
  const calculateMaxDepthForTreeArray = (treeArray: any[]): number => {
    let maxDepth = 0;
    for (const tree of treeArray) {
      const currentDepth = calculateSingleTreeDepth(tree);
      maxDepth = Math.max(maxDepth, currentDepth);
    }
    return maxDepth;
  };

  const refreshConvertedData = () => {
    if (data.length === 0) {
      return;
    }

    setConvertedData([]);
    const maxDepth = calculateMaxDepthForTreeArray(data);

    const datas: any[] = [];
    for (let i = 0; i < maxDepth; i++) {
      let current;
      if (i === 0) {
        current = data.map((item) => ({
          label: item[labelField],
          value: item[valueField],
          children: item[childrenField],
        }));
      } else {
        current = datas[datas.length - 1][selectedIndex[i - 1]][
          childrenField
        ].map((item) => ({
          label: item[labelField],
          value: item[valueField],
          children: item[childrenField],
        }));
      }
      datas.push(current);
    }
    setConvertedData(datas);
  };

  const currentSelectedValue = (currentIndex) => {
    return convertedData.map((item, index) => {
      return item.filter((_, idx) => idx === currentIndex[index])[0].value;
    });
  };

  const currentSelectedLabel = (currentIndex) => {
    return convertedData.map((item, index) => {
      return item.filter((_, idx) => idx === currentIndex[index])[0].label;
    });
  };

  useEffect(() => {
    if (selectedIndex.length === 0) {
      const maxDepth = calculateMaxDepthForTreeArray(data);
      setSelectedIndex(new Array(maxDepth).fill(0));
      return;
    }
    refreshConvertedData();
  }, [selectedIndex]);

  useUpdateEffect(() => {
    onChange({
      value: currentSelectedValue(selectedIndex),
      label: currentSelectedLabel(selectedIndex),
    });
  }, [convertedData]);

  return (
    <OuiPicker
      visible={visible}
      onMaskClick={onMaskClick}
      onCancel={onCancel}
      onConfirm={() =>
        onConfirm({
          value: currentSelectedValue(selectedIndex),
          label: currentSelectedLabel(selectedIndex),
        })
      }
    >
      {convertedData.map((item, index) => (
        <OuiPickerItem
          key={index}
          data={item}
          value={item.filter((_, idx) => idx === selectedIndex[index])[0].value}
          onChange={(i) => {
            setSelectedIndex((prev) => {
              const next = prev.map((item, idx) => {
                if (idx > index) {
                  return 0;
                }
                if (idx === index) {
                  return i;
                }
                return item;
              });
              return next;
            });
          }}
        ></OuiPickerItem>
      ))}
    </OuiPicker>
  );
}

export default OuiRelationPicker;