import React, { useCallback, useEffect, useState } from 'react';
import { Checkbox, Empty, Input, message, Tree } from 'antd';
import type { DataNode } from 'antd/es/tree';
import { SearchOutlined } from '@ant-design/icons';
import _ from 'lodash';

interface ExportTreeProps {
  exportData: any;
  exportLastData: any;
  changeExportData: any;
}

const ExportTree: React.FC<ExportTreeProps> = (props) => {
  const { exportData, exportLastData, changeExportData } = props;
  const [treeData, setTreeData] = useState<any[]>([]);
  const [allData, setAllData] = useState<any>([]);
  const [treeDataSort, setTreeDataSort] = useState<any>([]);
  // const [keyword, setKeyword] = useState<string>('');
  const [expandedKeys, setExpandedKeys] = useState<any>([]);
  const [checkNum, setCheckNum] = useState<number>(0);
  const [allNum, setAllNum] = useState<number>(0);
  const [exportAll, setExportAll] = useState<any>([]);
  const [checkedKeys, setCheckedKeys] = useState<any>([]);
  const [exportKeys, setExportKeys] = useState<any>([]);
  const [checkStatus, setCheckStatus] = useState<boolean>(false);

  const onChangeAll = (val: any) => {
    setCheckStatus(val);
    if (val) {
      const data: any = [];
      exportAll.forEach((el: any) => {
        data.push(el.key);
      });
      setCheckedKeys(data);
    } else {
      setCheckedKeys([]);
    }
  };
  // 子表以及子字段调整
  const filterSelectKey = (_checkedKeys: any, _treeData: any) => {
    const newSelectKeys: any = [..._checkedKeys];
    const _data = [..._treeData];
    _data.forEach((el: any) => {
      if (el.children?.length) {
        let flag = false;
        el.children.forEach((al: any) => {
          if (_checkedKeys.includes(al.key) && !_checkedKeys.includes(el.key)) {
            flag = true;
          }
        });
        if (flag) {
          newSelectKeys.push(el.key);
        }
      }
    });
    return newSelectKeys;
  };
  // 判断全选
  useEffect(() => {
    if (checkNum === allNum) {
      setCheckStatus(true);
    } else {
      setCheckStatus(false);
    }
  }, [checkNum, allNum]);

  // 获取所有的数据列表状态
  const getAllChildren = (_data: any) => {
    const allCount: any = [];
    const getAll = (data: any) => {
      data.forEach((el: any) => {
        allCount.push(el);
        if (el.children) {
          getAll(el.children);
        }
      });
    };
    getAll(_data);
    return allCount;
  };
  // 判断选择的字段
  useEffect(() => {
    if ((treeData?.length || treeDataSort?.length) && checkedKeys) {
      let allChildren = [];
      // 再点击搜索前treeData的状态保存住，包含拖拽顺序
      if (treeDataSort.length) {
        allChildren = getAllChildren(treeDataSort);
      } else {
        allChildren = getAllChildren(treeData);
      }
      const sort: any = [];
      (allChildren || []).forEach((el: any) => {
        if (checkedKeys.includes(el.key)) {
          sort.push(el.key);
        }
      });
      const exportAllKeys = filterSelectKey(sort, allChildren);
      changeExportData(exportAllKeys || []);
    }
    if (!checkedKeys?.length) {
      setCheckNum(0);
    } else {
      setCheckNum(checkedKeys?.length);
    }
  }, [checkedKeys]);

  // 设置全部字段
  useEffect(() => {
    if (treeData?.length && checkedKeys?.length) {
      // 搜索后点击取消父字段，实际还有部分子字段没取消，恢复全部的时候父字段没选中
      const currentSelectKeys = filterSelectKey(checkedKeys, treeData);
      setCheckedKeys(currentSelectKeys || []);
      // // 排序问题
      // if (newSelectKeys?.length) {
      //   const allChildren = getAllChildren(treeData);
      //   const sort: any = [];
      //   (allChildren || []).forEach((el: any) => {
      //     if (newSelectKeys.includes(el.key)) {
      //       sort.push(el.key);
      //     }
      //   });
      //   changeExportData(sort || []);
      // }
      // 长度一致没有进行筛选，保存状态
    }
    if (treeData?.length && exportData?.length) {
      const allTreeChildren = getAllChildren(treeData);
      const allDataChildren = getAllChildren(exportData);
      if (allTreeChildren?.length === allDataChildren?.length) {
        setTreeDataSort(_.cloneDeep(treeData));
      }
    }
  }, [treeData]);

  useEffect(() => {
    if (exportData?.length) {
      setAllData(_.cloneDeep(exportData)); //总字段
      setTreeData(_.cloneDeep(exportData)); //筛选后的字段
      const allCount: any = [];
      const allKeys: any = [];
      const getAll = (data: any) => {
        data.forEach((el: any) => {
          allCount.push(el);
          allKeys.push(el.key);
          if (el.children) {
            getAll(el.children);
          }
        });
      };
      getAll(exportData);

      setExportAll(allCount); // 拆分总字段
      setExportKeys(allKeys); // 总字段的key
      setAllNum(allCount?.length || 0); // 总字段长
    } else {
      setAllNum(0);
    }
  }, [exportData]);

  useEffect(() => {
    if (exportLastData?.length) {
      setCheckedKeys(exportLastData);
    } else {
      setCheckedKeys(exportKeys);
      setCheckStatus(true);
    }
  }, [exportLastData, exportKeys]);

  // 使节点一直展开
  useEffect(() => {
    if (allData?.length) {
      const codeArr: any = [];
      const loopTreeNode = (nodesData: any[]) => {
        // @ts-ignore
        nodesData.forEach((item, index) => {
          codeArr.push(item.key);
          item.key = item.key;
          item.__next = nodesData[index + 1] ? nodesData[index + 1].key : null;

          if (!item.children) {
            item.isLeaf = true;
          } else {
            loopTreeNode(item.children);
          }
        });
      };
      loopTreeNode(treeData || []);
      setExpandedKeys(codeArr);
    }
  }, [allData]);
  // 拖拽节点
  const handleDrop = (info: any) => {
    if (info.dragNode.pid !== info.node.pid || !info.dropToGap) {
      message.warn('不能移至该节点');
      return;
    }
    const dropKey = info.node.key;
    const dragKey = info.dragNode.key;
    const dropPos = info.node.pos.split('-');
    const dropPosition =
      info.dropPosition - Number(dropPos[dropPos.length - 1]);

    const loop = (
      data: DataNode[],
      key: React.Key,
      callback: (node: DataNode, i: number, data: DataNode[]) => void,
    ) => {
      for (let i = 0; i < data.length; i++) {
        if (data[i].key === key) {
          return callback(data[i], i, data);
        }
        if (data[i].children) {
          loop(data[i].children!, key, callback);
        }
      }
    };
    const data = [...treeData];

    // Find dragObject
    let dragObj: DataNode;
    loop(data, dragKey, (item, index, arr) => {
      arr.splice(index, 1);
      dragObj = item;
    });

    if (!info.dropToGap) {
      // Drop on the content
      loop(data, dropKey, (item) => {
        item.children = item.children || [];
        // where to insert 示例添加到头部，可以是随意位置
        item.children.unshift(dragObj);
      });
    } else if (
      ((info.node as any).props.children || []).length > 0 && // Has children
      (info.node as any).props.expanded && // Is expanded
      dropPosition === 1 // On the bottom gap
    ) {
      loop(data, dropKey, (item) => {
        item.children = item.children || [];
        // where to insert 示例添加到头部，可以是随意位置
        item.children.unshift(dragObj);
      });
    } else {
      let ar: DataNode[] = [];
      let i: number;
      loop(data, dropKey, (_item, index, arr) => {
        ar = arr;
        i = index;
      });
      if (dropPosition === -1) {
        ar.splice(i!, 0, dragObj!);
      } else {
        ar.splice(i! + 1, 0, dragObj!);
      }
    }

    setTreeData(data);
  };
  const checkData = (val: any, e: any) => {
    const selectKeyCurrentPid = e.node.pid || '';
    const selectKeyCurrentChildren = e.node.children || [];
    // 子表选择联动子表的字段选中
    if (val?.checked?.length) {
      let checkCurrent = val.checked || [];
      if (selectKeyCurrentChildren?.length) {
        // 是否为父
        if (e.checked) {
          // 如果选中，则选择该字段下所有子字段
          selectKeyCurrentChildren.forEach((al: any) => {
            checkCurrent.push(al.key);
          });
        } else {
          // 取消选中则清空下所有子字段
          selectKeyCurrentChildren.forEach((al: any) => {
            checkCurrent = checkCurrent.filter((cl: any) => cl !== al.key);
          });
        }
      } else if (selectKeyCurrentPid && selectKeyCurrentPid !== '*') {
        // 是否为子字段
        if (e.checked) {
          // 选中一个子字段并判断父字段是否被选中，没被选中则选中
          if (!checkCurrent.includes(selectKeyCurrentPid)) {
            checkCurrent.push(selectKeyCurrentPid);
          }
        } else {
          // 子字段全部取消则取消父字段
          const parentData = exportAll.filter(
            (el: any) => el.key === selectKeyCurrentPid,
          );
          const parentKey: any = [];
          if (parentData[0]?.children?.length) {
            parentData[0].children.forEach((el: any) => {
              parentKey.push(el.key);
            });
          }
          let flag: boolean = false;
          checkCurrent.forEach((el: any) => {
            if (parentKey.includes(el)) {
              flag = true;
            }
          });
          if (!flag) {
            checkCurrent = checkCurrent.filter(
              (al: any) => al !== selectKeyCurrentPid,
            );
          }
        }
      }
      setCheckedKeys(checkCurrent);
    } else {
      setCheckedKeys([]);
    }
  };
  const generateTreeData = useCallback(
    (_data: any[], _keywords?: string): any[] => {
      const _treeNode: any[] = [];
      _data.map((item) => {
        if (typeof item.visible === 'boolean' && !item.visible) {
          return;
        }
        const _item: any = {
          ...item,
          children: [],
        };
        if (item.children) {
          _item.children = generateTreeData(item.children, _keywords);
        }
        _treeNode.push(_item);
      });
      return _treeNode;
    },
    [],
  );
  const filter = (word: string) => {
    // setKeyword(word);
    const traverse = function (node: any) {
      const childNodes = node.children || [];
      node.visible = node.name.indexOf(word) > -1;

      childNodes.forEach((child: any) => {
        child.visible = child.name.indexOf(word) > -1;
        traverse(child);
      });

      if (!node.visible && childNodes.length) {
        node.visible = childNodes.some((child: any) => child.visible);
      }
    };
    if (allData) {
      const _data = _.cloneDeep(allData);
      if (word != '') {
        // @ts-ignore
        _data.forEach((item) => {
          traverse(item);
        });
      }
      setTreeData(generateTreeData(_data, word));
    }
  };
  // 搜索框事件
  const handleChange = (e: { type: string; target: { value: string } }) => {
    // if (e.type === 'click' && e.target.value === '' && keyword !== '') {
    //   filter(keyword);
    // }
    const _keyword = e.target.value.replace(/(^\s*)|(\s*$)/g, '');
    if (_keyword) {
      filter(_keyword);
    } else {
      // 如果存在之前的状态则回归
      if (treeDataSort?.length) {
        setTreeData(treeDataSort || []);
      } else {
        setTreeData(allData || []);
      }
    }
  };
  const handleSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
    // @ts-ignore
    const _keyword = e.target.value.replace(/(^\s*)|(\s*$)/g, '');
    if (_keyword) {
      filter(_keyword);
    }
  };

  return (
    <>
      <div className={'qx-export-filter'}>
        <Input
          style={{ width: 170 }}
          placeholder={'输入字段名称搜索'}
          allowClear
          prefix={<SearchOutlined />}
          onChange={(e) => {
            handleChange(e);
          }}
          onPressEnter={(e) => {
            handleSearch(e);
          }}
        />
      </div>
      {treeData.length > 0 ? (
        <>
          <Checkbox
            style={{ margin: '0 0 5px 6px' }}
            checked={checkStatus}
            onChange={(e) => onChangeAll(e.target?.checked)}
            indeterminate={checkNum !== 0 && checkNum < allNum}
          >
            全选
            <span style={{ color: '#999' }}>
              {' '}
              （{checkNum}/{allNum}）
            </span>
          </Checkbox>
          <Tree
            treeData={treeData}
            fieldNames={{
              title: 'name',
              key: 'key',
              children: 'children',
            }}
            checkable
            onDrop={handleDrop}
            style={{ height: '100%' }}
            blockNode
            checkStrictly
            draggable
            onCheck={checkData}
            selectable={false}
            checkedKeys={checkedKeys}
            defaultExpandedKeys={expandedKeys}
            expandedKeys={expandedKeys}
            onExpand={(keys) => setExpandedKeys(keys)}
          />
        </>
      ) : (
        <Empty style={{ height: '100%', margin: '0', paddingTop: '60px' }} />
      )}
    </>
  );
};
export default ExportTree;