import React, { CSSProperties, useMemo, useState, useRef } from 'react';

import Icon from '../Icon/index';
import { Row, Col } from 'antd';
import { TabsActive } from '../../store/page';
import { useRecoilState } from 'recoil';

function LargeScreenComponentCollapseItem(
  props: ILargeScreenComponentCollapseItem
) {
  const {
    cardList,
    type,
    span,
    replaceIcon,
    showTitle,
    hoverBox,
    activeIndex,
    showReplace,
    showTag,
    tagText,
    tagStyle,
    wrapStyle,
    imgOrIconStyle,
    titleStyle,
    imgStyle,
    replaceStyle,
    change,
    onClick
  } = props;
  const { marginRight } = wrapStyle;
  const [currentIndex, setCurrentIndex] = useState(null); // 当前 hover的index
  const dragDom = useRef<any>(null);
  const [, setTabsActive] = useRecoilState(TabsActive); //tabs当前选中项

  // 双击
  const _click = (value: ICardList, type: string, index: number) => {
    change?.(value, type, index);
    setTabsActive('page');
  };

  const drag = (e: React.DragEvent, cardItem: ICardList) => {
    e.stopPropagation();
    //当前是文件 不触发
    if (cardItem?.type === 'folder') {
      return false;
    }
    e.dataTransfer.dropEffect = 'copy';
    e.dataTransfer.setData('text/plain', JSON.stringify(cardItem));
    change?.(JSON.stringify(cardItem), 'cardStart');
  };

  //渲染卡片
  const renderImg = (cardItem: ICardList, index: number) => {
    if (type === 'img' && typeof cardItem?.url === 'string') {
      return (
        <img
        draggable={!onClick && (cardItem.type !== 'folder')}
          src={`${
            currentIndex === index && cardItem?.hoverUrl
              ? cardItem?.hoverUrl
              : cardItem?.url
          }`}
          alt={cardItem?.title}
          style={{ ...imgStyle }}
        />
      );
    } else if (type === 'icon' && typeof cardItem?.url === 'string') {
      return <Icon name={cardItem?.url} style={{ ...imgStyle }} />;
    } else {
      return cardItem?.url;
    }
  };

  // 切换鼠标进入效果
  const changeCurrentIndex = (index: number) => {
    setCurrentIndex(index);
  };

  // 切换鼠标退出效果
  const deleteCurrentIndex = () => {
    setCurrentIndex(null);
  };

  const Dom = useMemo(() => {
    return (
      <Row>
        {Array.isArray(cardList) &&
          cardList?.length > 0 &&
          cardList?.map((cardItem, index) => {
            return (
              <Col key={index}>
                <div
                  onClick={() => {
                    if (cardItem.type === 'folder') {
                      _click(cardItem, 'changeAnimation', index);
                    }
                  }}
                  onMouseEnter={() => changeCurrentIndex(index)}
                  onMouseLeave={deleteCurrentIndex}
                  draggable={!onClick && (cardItem.type !== 'folder')}
                  onDragStart={(e) => {
                    drag(e, cardItem);
                  }}
                  ref={dragDom}
                  className={`${
                    hoverBox === 'wrap' ? 'zl-large-screen-card-hover' : ''
                  } zl-large-screen-component-collapse-item ${
                    activeIndex === index ? 'zl-large-screen-card-active' : ''
                  }`}
                  style={{
                    ...wrapStyle,
                    width:
                      (260 - marginRight * (span - 1) - span * 2 - 41) / span +
                      2,
                    marginRight: (index + 1) % span !== 0 ? marginRight : 0
                  }}
                  onDoubleClick={() => {
                    //当前是文件 不触发
                    if (!onClick && (cardItem.type !== 'folder')) {
                      _click(cardItem, 'clickCard', index);
                    }
                  }}
                >
                  <div
                    className={
                      hoverBox === 'img' ? 'zl-large-screen-card-hover ' : null
                    }
                    style={{ ...imgOrIconStyle }}
                  >
                    {renderImg(cardItem, index)}
                    {showTag ? (
                      <span style={{ ...tagStyle }}>{tagText}</span>
                    ) : (
                      <></>
                    )}
                    {showReplace ? (
                      <Icon
                        style={{ ...replaceStyle }}
                        name={replaceIcon}
                        doubleClick={() => {
                          _click(cardItem, 'clickIcon', index);
                        }}
                      />
                    ) : (
                      <></>
                    )}
                  </div>
                  {showTitle ? (
                    <span
                      title={cardItem?.title}
                      className="zl-large-screen-card-title"
                      style={{ ...titleStyle }}
                    >
                      {cardItem?.title}
                    </span>
                  ) : (
                    <></>
                  )}
                </div>
              </Col>
            );
          })}
      </Row>
    );
  }, [
    cardList,
    type,
    span,
    replaceIcon,
    showTitle,
    hoverBox,
    activeIndex,
    showReplace,
    showTag,
    tagText,
    tagStyle,
    wrapStyle,
    imgOrIconStyle,
    titleStyle,
    imgStyle,
    replaceStyle,
    currentIndex
  ]);

  return Dom;
}
export default LargeScreenComponentCollapseItem;

export interface ILargeScreenComponentCollapseItem {
  cardList?: ICardList[];
  type?: string;
  span?: number;
  replaceIcon?: string;
  height?: number;
  showTitle?: boolean;
  showReplace?: boolean;
  showTag?: boolean;
  tagText?: string;
  hoverBox?: string;
  activeIndex?: number;
  tagStyle?: CSSProperties;
  wrapStyle?: any;
  imgOrIconStyle?: CSSProperties;
  titleStyle?: CSSProperties;
  imgStyle?: CSSProperties;
  replaceStyle?: CSSProperties;
  change?: Function;
  onClick?: Function;
}

export interface ICardList {
  key?: string;
  url?: string | React.ReactNode;
  hoverUrl?: string | React.ReactNode;
  title?: string;
  type?: string;
  active?: Boolean;
}