import React from 'react';
import { SortableContainer } from 'react-sortable-hoc';
import { WrapStyle } from './styles';
import { PreviewList } from '../previewList';
import { ImgModal, ImgModalRefParams } from '../imgModal';
import { CropperModal } from '../cropperModal';
import { CropperModalRefParams } from '../cropperModal/interface';
import { UploadButton } from '../uploadButton';
import { UploadButtonRefParams } from '../uploadButton/interface';
import FileModal from '../fileModal';
import { FileModalRefParams } from '../fileModal/interface';
import { SortableContainerProps } from './interface';

export const UploadContainer = SortableContainer((props: SortableContainerProps) => {
  const {
    // oss相关
    isOss, projectId, featureName, ossDir, securityType, expire,
    // 裁剪相关
    ableCrop, aspectRatio, cropType, cropFinish,
    // 拖拽
    isDrag, 
    // request上传配置
    fileName, name = 'files', requestKeyName = 'files', request,
    // 文件限制相关配置
    multiple, accept, isAccept, quantity = 1, maxSize, picWidth, picHeight, deviation, beforeUpload,
    // 预览相关配置
    buttonText, disabled, hidePreview, previewPlaceholder = '-', maxShow, column, isVertical,
    showFileName, showFileNameTip, ossImgConfig, errMessage, showFileModel = false,
    // 方法相关配置
    setFileParams, uploadFinish,
    // 基础参数
    uploadType, originalProps,
    // 私有参数
    fileListRef, refreshValue, setFileList, items: fileList,
  } = props;

  const [isRefreshFilePreview, setIsRefreshFilePreview] = React.useState(false);
  
  const imgModalRef = React.useRef<ImgModalRefParams>();
  const fileModalRef = React.useRef<FileModalRefParams>();
  const cropperModalRef = React.useRef<CropperModalRefParams>();
  const uploadRef = React.useRef<UploadButtonRefParams>();

  const ossAggregate = { isOss, projectId, featureName, ossDir, securityType, expire }; 
  const cropAggregate = { ableCrop, aspectRatio, cropType, cropFinish };
  const ohterAggregate = { uploadType, setFileList}

  const cropperModalProps = {uploadRef, ...cropAggregate }
  const previewListProps = {
    fileList,
    isDrag,
    disabled,
    showFileModel,
    imgModalRef,
    refreshValue,
    fileModalRef,
    itemProps: {
      ...ossAggregate,
      ...ohterAggregate,
      maxShow,
      column,
      ossImgConfig: securityType === 'private' ? undefined : ossImgConfig,
      fileDisabled: disabled,
      showFileName,
      showFileNameTip,
      fileListRef,
      isRefreshFilePreview,
    }
  }
  const UploadButtonProps = {
    ...ossAggregate,
    ...cropAggregate,
    ...ohterAggregate,
    fileListRef,
    // 文件限制相关配置
    multiple, accept, isAccept, quantity, maxSize, picWidth, picHeight, deviation, beforeUpload,
    // request上传配置
    fileName, name, requestKeyName, request,
    // 方法相关配置
    setFileParams, uploadFinish,
    // 
    disabled, errMessage, fileList, originalProps, buttonText, cropperModalRef
  }
  
  return disabled && fileList.length == 0 ? (
    <div className="YUpload-no-data-preview">{previewPlaceholder}</div>
  ) : (
    <WrapStyle
      className="YUpload"
      disabled={!!disabled}
      hidePreview={!!hidePreview}
      uploadType={uploadType}
      column={column}
      isMax={fileList.length >= quantity}
    >
      {/* 预览列表 */}
      {!hidePreview && uploadType === 'uploadPicture' && (
        <PreviewList {...previewListProps} />
      )}
      {!hidePreview && uploadType !== 'uploadPicture' && (
        <div className="YUpload-list-preview-wrap">
          <PreviewList {...previewListProps} />
        </div>
      )}
      {/* 上传按钮 */}
      <UploadButton {...UploadButtonProps} getRef={ref => uploadRef.current = ref} />
      {/* 裁剪 */}
      <CropperModal {...cropperModalProps} getRef={ref => cropperModalRef.current = ref} />
      {/* 文件预览 */}
      <FileModal projectId={projectId} securityType={securityType} setIsRefreshFilePreview={setIsRefreshFilePreview} getRef={ref => fileModalRef.current = ref} />
      {/* 图片预览弹框 */}
      <ImgModal fileList={fileList} getRef={ref => imgModalRef.current = ref} />
    </WrapStyle>
  )
});
