import React, { ReactNode, useMemo, useRef } from 'react';

import Icon from '../Icon/index';
import { Tree, Tooltip, Popover } from 'antd';
function LargeScreenComponentTree(props: ILargeScreenComponentTree) {
  const { list, autoExpandParent, expandedKeys, change, styles,height } = props;
  const dragDom = useRef<any>(null);

  const onExpand = (expandedKeys) => {
    change?.(expandedKeys, 'treeExpand');
  };

  //树的点击事件
  const clickTree = (item: IList, type: string) => {
    change?.(item, type);
  };

  //拖拽事件
  const drag = (e: React.DragEvent, item: IList) => {
    e.stopPropagation();
    let itemObj = {
      url: item?.url,
      key: item?.key,
      title: item?.title,
      type: item?.type,
      componentType: item?.componentType
    };
    e.dataTransfer.dropEffect = 'copy';
    e.dataTransfer.setData('text/plain', JSON.stringify(itemObj));
    change?.(JSON.stringify(itemObj), 'cardStart');
  };

  //处理树的数据
  const treeData = (list) => {
    let newList =
      Array.isArray(list) &&
      list?.length > 0 &&
      list?.map((item, index) => {
        if (item?.children?.length > 0) {
          return {
            title: (
              <Tooltip title={item?.title} mouseLeaveDelay={0}>
                <span>{item?.title}</span>
              </Tooltip>
            ),
            key: item?.key,
            icon:
              typeof item?.icon === 'string' ? (
                <Icon name={item?.icon} />
              ) : (
                item?.icon
              ),
            children: treeData(item?.children)
          };
        } else {
          if (item.type === 'folder') {
            return {
              title:
                typeof item?.title === 'string' ? (
                  <Tooltip title={item?.title} mouseLeaveDelay={0}>
                    <span>{item?.title}</span>
                  </Tooltip>
                ) : (
                  item.title
                ),
              key: item?.key,
              icon:
                typeof item?.icon === 'string' ? (
                  <Icon name={item?.icon} />
                ) : (
                  item?.icon
                ),
              children: []
            };
          } else {
            return {
              title:
                typeof item?.title === 'string' ? (
                  <Popover
                    overlayClassName="zl-large-screen-component-tree-popover"
                    placement="right"
                    align={{
                      offset: [40, 0]
                    }}
                    content={
                      typeof item?.url == 'string' ? (
                        <div className="zl-large-screen-tree-thumbnail">
                          <div className="zl-large-screen-tree-thumbnail-wrap">
                            <img src={item?.url} alt={item?.title} />
                          </div>
                        </div>
                      ) : (
                        item?.url
                      )
                    }
                  >
                    <span
                      draggable="true"
                      ref={dragDom}
                      className="zl-chart-name"
                      onDoubleClick={() => {
                        clickTree(item, 'clickTree');
                      }}
                      onDragStart={(e) => {
                        drag(e, item);
                      }}
                    >
                      <Tooltip title={item?.title} mouseLeaveDelay={0}>
                        {typeof item?.title === 'string' ? (
                          <span>{item?.title}</span>
                        ) : (
                          item?.title
                        )}
                      </Tooltip>
                    </span>
                  </Popover>
                ) : (
                  item?.title
                ),
              key: item?.key,
              icon:
                typeof item?.icon === 'string' ? (
                  <Icon
                    name={item?.icon}
                    click={() => {
                      clickTree(item.key, 'clickTree');
                    }}
                  />
                ) : (
                  item?.icon
                ),
              children: []
            };
          }
        }
      });
    return newList;
  };

  const Dom = useMemo(() => {
    return (
      <div
        className="zl-large-screen-component-tree"
        style={{ ...styles, height: `calc(100% - ${height}px)` }}
      >
        {list?.length > 0 ? (
          <Tree
            onExpand={onExpand}
            expandedKeys={expandedKeys}
            autoExpandParent={autoExpandParent}
            showIcon
            blockNode
            treeData={treeData(list)}
          />
        ) : (
          <div className="zl-large-screen-component-no-data">
            <span>暂无图表</span>
          </div>
        )}
      </div>
    );
  }, [list, autoExpandParent, expandedKeys, styles]);

  return Dom;
}

export default LargeScreenComponentTree;

export interface ILargeScreenComponentTree {
  list: IList[];
  autoExpandParent?: boolean;
  expandedKeys?: string[] | number[];
  change?: Function;
  styles?: React.CSSProperties;
  height?:number
}
export interface IList {
  key: string[];
  title: string | ReactNode;
  type?: string;
  icon?: string | ReactNode;
  children?: IList[];
  url?: string | ReactNode;
  componentType?: string;
}