import React, { useState, useEffect } from 'react';
import styles from './index.less';
import classnames from 'classnames';
import { Image, Popover } from '@easyv/antd';
import { DefaultGraph } from './MaterialLib';
import defaultThumb from 'images/sourceImg.png';
import VideoComponent from '../../MaterialModal/video';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import NoData from './NoData';
import {getAssetsUrl } from 'utils/utils';

const _collectTransformFormat = (data) => {
  if (!data) {
    return [];
  }
  const { category, list = [] } = data;
  const _category = Array.isArray(category) ? [...category] : [];
  return _category.map((d) => {
    return {
      ...d,
      list: list.filter((x) => x.userCategoryId === d.id)
    };
  });
};

function MyFavorite({ onCreateComponents, resource }: { onCreateComponents: (x) => void; resource: any }) {
  const filterResource: {
    id: number;
    name: string;
    list: any[];
    type: 1 | 2;
  }[] = resource ? _collectTransformFormat(resource?.data) : [];

  const [isShow, setIsShow] = useState<{ open: 1 | 2 }[]>([]);

  useEffect(() => {
    const tempList: { open: 1 | 2 }[] = [];
    filterResource.map(() => {
      tempList.push({
        open: 1
      });
    });
    setIsShow(tempList);
  }, [resource]);

  const openOrClose = (index) => {
    isShow.map((item, i) => {
      const list = [...isShow];
      if (i === index) {
        if (isShow[i].open === 1) {
          setIsShow(list.map((item, idx) => (idx === i ? { ...item, open: 2 } : item)));
        } else if (isShow[i].open === 2) {
          setIsShow(list.map((item, idx) => (idx === i ? { ...item, open: 1 } : item)));
        }
      }
    });
  };

  return filterResource.length ? (
    <>
      {filterResource.map((v, index) => {
        return (
          <div key={v.id} className={styles.contentItem}>
            <div className={styles.title}>{v.name}</div>
            <div
              className={styles.containerList}
              style={isShow[index]?.open === 2 ? { maxHeight: 'unset', overflowY: 'unset' } : { maxHeight: '178px', overflowY: 'hidden' }}>
              {v.list?.length ? (
                v.list.map((d) => {
                  return (
                    <div
                      key={d.id}
                      onClick={() => {
                        onCreateComponents(d);
                      }}
                      className={classnames(styles.containerItem, styles[`edition_${d.edition}`])}>
                      <div className={styles.cover}>
                        {d.type === 2 ? (
                          <VideoComponent url={getAssetsUrl(d.thumb)} isSelect={true} title={d.name} />
                        ) : (
                          <Popover
                            content={
                              <div className={styles.content}>
                                <Image
                                  preview={false}
                                  fallback={defaultThumb}
                                  id={d.id}
                                  src={d.thumb ? getAssetsUrl(d.thumb) : defaultThumb}
                                />
                              </div>
                            }
                            mouseEnterDelay={2}
                            placement="top"
                            title={d.name}
                            trigger="hover"
                            overlayClassName={styles.preview}>
                            <Image preview={false} fallback={defaultThumb} id={d.id} src={d.thumb ? getAssetsUrl(d.thumb) : defaultThumb} />
                          </Popover>
                        )}
                      </div>
                      <span>{d.name}</span>
                    </div>
                  );
                })
              ) : (
                <NoData />
              )}
            </div>
            {v.list?.length > 6 && (
              <div
                className={styles.open}
                onClick={() => {
                  openOrClose(index);
                }}>
                {isShow[index]?.open === 2 ? (
                  <span>
                    收起
                    <UpOutlined />
                  </span>
                ) : (
                  <span>
                    展开
                    <DownOutlined />
                  </span>
                )}
              </div>
            )}
          </div>
        );
      })}
    </>
  ) : (
    <DefaultGraph title="素材库为空" />
  );
}

export default MyFavorite;
