import React, { useState, useEffect, useContext } from 'react';
import classNames from '@pansy/classnames';
import { Upload, Spin, message, Button } from 'antd';
import { UploadProps, UploadChangeParam, RcFile } from 'antd/es/upload';
import { UploadFile } from 'antd/es/upload/interface';
import {
  PlusOutlined,
  LoadingOutlined,
  UploadOutlined,
} from '@ant-design/icons';
import groupBy from 'lodash/groupBy';
// import Icon from '../icon';
// import { ConfigContext } from '../config-provider';
// import Viewer from '../viewer';
// import Image from '../image';
// import Player from '../player';
import { getSizeTipText, isImageUrl, isVideoUrl, getImgBase64 } from './utils';

export interface UploadFilesProps extends UploadProps {
  value?: UploadProps['fileList'];
  // 图片大小限制，(单位: K) -1 表示不进行限制
  sizeLimit?: number;
  // 图片数目限制 -1 表示不进行限制
  lengthLimit?: number;
  // 视频文件大小限制
  videoSizeLimit?: number;
  desc?: string;
  iconRenderText?: string;
  uploadText?: string;
}

// const { ImageViewer } = Viewer;

const UploadFiles: React.FC<UploadFilesProps> = props => {
  const {
    className,
    sizeLimit,
    lengthLimit,
    desc,
    value = [],
    onChange,
    iconRenderText,
    uploadText,
    videoSizeLimit,
    ...rest
  } = props;
  // const [visible, setVisible] = useState<boolean>(false);
  const [fileList, setFileList] = useState<UploadProps['fileList']>([]);
  // const { getPrefixCls } = useContext(ConfigContext);

  useEffect(() => {
    setFileList(value);
  }, [props.value]);

  const prefixCls = 'sen-upload-image';

  const beforeUpload = (file: RcFile): boolean => {
    // 大小检查结果
    let sizeResult: boolean = true;
    let acceptResult: boolean = true;

    // 检查图片文件大小
    if (sizeLimit !== -1 && isImageUrl(file)) {
      sizeResult = file.size < sizeLimit * 1024;
      if (!sizeResult) {
        message.error(`图片大小不得大于${getSizeTipText(sizeLimit)}`);
      }
    }

    // 检查视频文件大小
    if (sizeLimit !== -1 && isVideoUrl(file)) {
      sizeResult = file.size < sizeLimit * 1024;
      if (!sizeResult) {
        message.error(`视频大小不得大于${getSizeTipText(sizeLimit)}`);
      }
    }

    // 检查文件格式
    // acceptResult = checkFileType(file.type, props.accept);

    // if (!acceptResult) {
    //   message.error(`文件格式不正确`);
    // }

    return sizeResult;
  };

  const checkFileType = (type: string, accept: string) => {
    const fileType = type.split('/')[1];
    if (!accept || !fileType) return true;

    const types = accept.split(',');

    for (let i = 0; i < types.length; i++) {
      if (types[i].indexOf('/') !== -1) {
        if (fileType === types[i].split('/')[1]) {
          return true;
        }
      }

      if (types[i].startsWith('.')) {
        if (`.${fileType}` === types[i]) {
          return true;
        }
      }
    }

    return false;
  };

  const getFileList = async (list: UploadProps['fileList']) => {
    const result = groupBy(list, item => {
      if (!item.url && !item.preview) {
        return 'base64';
      } else {
        return 'normal';
      }
    });

    const imgs = await Promise.all(
      (result.base64 || []).map(async item => {
        if (!item.url && !item.preview && isImageUrl(item)) {
          item.preview = (await getImgBase64(
            item.originFileObj as File,
          )) as string;
        }
        return item;
      }),
    );

    return [...(result.normal || []), ...imgs];
  };

  const handleChange = async ({ file, fileList }: UploadChangeParam) => {
    if (!file.status) return;
    // 过滤检查未通过的文件
    let newFileList = [...fileList].filter(
      item => !item.originFileObj || (item.originFileObj && item.status),
    );
    if (file.status === 'done') {
      const { data } = file.response;
      newFileList = fileList?.map((item: any) => {
        if (item.uid === file.uid) {
          return { ...item, url: data };
        } else {
          return item;
        }
      });
    }
    const list = await getFileList(newFileList);
    setFileList(list);
    onChange?.({ file, fileList: list });
  };

  const renderChildren = () => {
    // if (lengthLimit === -1 || fileList?.length < lengthLimit) {
    //   return (
    //     <div className={`${prefixCls}-button`}>
    //       <PlusOutlined />
    //       <div className={`${prefixCls}-text`}>{uploadText}</div>
    //     </div>
    //   );
    // }
    return (
      <Button disabled={fileList?.length >= lengthLimit}>
        <UploadOutlined /> 上传
      </Button>
    );

    return null;
  };

  return (
    <div
      className={classNames(className, {
        // [`${prefixCls}`]: true,
      })}
    >
      <Upload
        onChange={handleChange}
        // onPreview={() => {
        //   setVisible(true);
        // }}
        beforeUpload={beforeUpload}
        // iconRender={(file) => {
        //   if (file.status === 'uploading') {
        //     return (
        //       <Spin
        //         className={`${prefixCls}-loading`}
        //         indicator={<LoadingOutlined spin />}
        //         tip={iconRenderText}
        //       />
        //     );
        //   }

        //   if (isImageUrl(file)) {
        //     return <img src={file.url || file.preview} />;
        //   }
        //   return <Icon type="icon-video" />;
        // }}
        {...rest}
        fileList={fileList}
      >
        {renderChildren()}
        {desc && <div className={`${prefixCls}-desc`}>{desc}</div>}
      </Upload>

      {/* <ImageViewer
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
        images={resource}
        renderImage={(idx: number) => {
          const item = resource[idx];

          if (!item) return null;

          if (isImageUrl(item as UploadFile)) {
            return (
              <div className="sen-image-view-image no-animation">
                <Image.Fit src={item.url} />
              </div>
            );
          } else {
            return (
              <div
                className="sen-image-view-image no-animation"
                style={{
                  height: '400px',
                  width: '711px'
                }}
              >
                <Player
                  source={item.url}
                  options={{
                    autoplay: false
                  }}
                />
              </div>
            );
          }
        }}
      /> */}
    </div>
  );
};

UploadFiles.defaultProps = {
  accept: '.png,.jpg,.jpeg',
  iconRenderText: '上传中...',
  uploadText: '上传图片',
  sizeLimit: 1024,
  videoSizeLimit: -1,
  lengthLimit: 3,
};

export default UploadFiles;