import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
import { themeable, ClassNamesFn, ThemeProps } from '../theme'
// import { autobind } from '../utils/helper'
// import Modal from './Modal'
import { Icon } from './icons'
import { LocaleProps, localeable } from '../locale'
import UnionImgContent from './Lion/UnionImgContent'
import MediaShowList from './Lion/MediaShowList'
import MSG from '../renderers/Lion/utils/msgsub'

import { Rnd } from 'react-rnd'
// import ImageViewer from '../renderers/Lion/components/ImageViewer'
import { chunk, throttle } from 'lodash'

import DragModal from './DragModal'
import { CloseOutlined } from '@ant-design/icons';
import { Button, Image, Spin, Tooltip, Modal } from 'antd'
import { Document, Page, pdfjs } from 'react-pdf';
import { domUtils } from '../utils/helper';
import { Shell } from '../utils/shell';
import { isPdf } from '../renderers/Lion/utils/utils'
// import { ImageViewer, NavBar } from 'antd-mobile';
export interface ImageGalleryProps extends ThemeProps, LocaleProps {
  children: React.ReactNode
  modalContainer?: () => HTMLElement
}

export interface MediaItem {
  src: string
  originalSrc: string
  title?: string
  caption?: string
  isNotImg?: boolean //  非图片模式 预览启用pdf
  downloadSrc?: string // 用于下载
}
interface IProps {
  visible: boolean;
  previewAddr: string;
  baseUrl: string;
  fileName: string;
  selectedAttachment: any;
  onClose: () => void;
}
export interface ImageGalleryState {
  isOpened: boolean
  index: number
  items: Array<MediaItem>

  unionImgShow: boolean //并图效果显示
  unionSelecting: boolean //并图勾选模式
  mediaListShow: boolean //展示下方列表
  imgRotate: number //图片旋转角度
  selectList: Array<number> // 勾选框选中的index列表
  unionList: Array<MediaItem> // 并图列表
  totalUnionList: Array<Array<number>> // 总并图数量
  selectUnionImgIndex: number // 并图选中下标

}
interface IAttachmentItem {
  src: string;
  originalSrc: string;
  downloadSrc: string;
  title?: string;
  caption?: string;
  isNotImg?: boolean;
}
const getImgOriginWidthAndHeight = (src) => new Promise((res, rej) => {
  // 创建一个新的 Image 对象
  const img = document.createElement('img');

  // 定义图片加载完成后的处理函数
  img.onload = function () {
    // 获取图片的原始宽度和高度
    const originalWidth = img.naturalWidth;
    const originalHeight = img.naturalHeight;
    res({ originalWidth, originalHeight });
  };

  // 设置图片的源 URL
  img.src = src;
});
// 初始状态
const initState = {
  isOpened: false,
  index: -1,
  items: [],

  unionImgShow: false,
  unionSelecting: false,
  mediaListShow: true,
  imgRotate: 0,
  selectList: [],
  unionList: [],
  totalUnionList: [],
  selectUnionImgIndex: 0,
}

// 弹窗最小的高度和宽度 同步设置
const toolHigh = 40;
// const previewHeight = 64 + toolHigh;
const previewHeight = 88 + toolHigh;
const clientHalfHeight = document.documentElement.clientHeight / 2;
const minHeight = clientHalfHeight - previewHeight;
const minWidth = 600;
// const defaultMove = { x: 0, y: 0 };
const ImageGallery: React.FC = (props: ImageGalleryProps) => {
  const { children } = props;
  // const [states, setStates] = useState(initState);
  const [visible, setVisible] = useState(false);
  const pcPreviewRef = useRef<HTMLDivElement>(null);
  const [previewInfo, setPreviewInfo] = useState({});
  /** events */
  const handleImageEnlarge = (info: {
    src: string
    originalSrc: string
    list?: Array<IAttachmentItem>
    title?: string
    caption?: string
    index?: number
  }) => {
    setPreviewInfo(info);
    setVisible(true);
    requestAnimationFrame(() => {
      pcPreviewRef.current?.handleGetOriginSize();
    });
  }
  const onClose = () => {
    setVisible(false);
  }
  const handlePreviewKeydown = (e) => {
    // 对应 ↑↓
    const filesKeyCode = [38, 40];
    // 对应 ←→
    const pdfFileKeyCode = [37, 39];
    const { keyCode } = e;
    // 文件上下个切换
    if (filesKeyCode.includes(keyCode)) {
      if (keyCode === 40) {
        pcPreviewRef.current?.handleNext();
      } else {
        pcPreviewRef.current?.handlePrev();
      }
    }
    // 文件预览左右按键实现 上下页切换
    if (pdfFileKeyCode.includes(keyCode)) {
      if (keyCode === 39) {
        pcPreviewRef.current?.handlePdfNext();
      } else {
        pcPreviewRef.current?.handlePdfPrev();
      }

    }
  }
  // resize计算高度 省的撑大

  /** events - end*/
  /** fileViewer */
  const PcPreview: React.FC<Omit<IProps, 'onClose'>> = forwardRef((props, ref) => {

    const [selectedAttachment, setSelectAttachment] = useState<IAttachmentItem>({});
    const [allAttachment, setAllAttachment] = useState([]);
    const [pageNumber, setPageNumber] = useState(1);
    const [scale, setScale] = useState(1);
    const [states, setStates] = useState(initState);

    const [pageIndex, setPageIndex] = useState(1);
    // const [moveData, setMoveData] = useState(defaultMove);
    const [FileHigh, setFileHigh] = useState<undefined | string | number>();
    // const [FileWidth, setFileWidth] = useState();
    const [rotate, setRotate] = useState(0);
    const previewRef = useRef<HTMLElement | null>(null);
    const dragRef = useRef<HTMLElement | null>(null);
    const previewTitleHigh = useRef<number>(0);
    const [dragging, setDragging] = useState(false);
    const [maxImgWidth, setMaxImgWidth] = useState<string | undefined>('100%');
    const [previewImgInfo, setPreviewImgInfo] = useState<{ width: string | number | undefined; height: string | number | undefined }>({ width: '100%', height: '100%' });
    const onWheel = throttle((e) => {
      // e.preventDefault();
      e.stopPropagation();
      // 往下滚 缩小
      if (e.deltaY > 0) {
        setScale((value) => Number((value - 0.1 <= 0.1 ? 0.1 : value - 0.1).toFixed(1)));
      }
      // 往下滚 放大
      else {
        setScale((value) => Number(Number(value + 0.1).toFixed(1)));
      }
    }, 300);
    // const { previewAddr, fileName, baseUrl, selectedAttachment = {} } = props;

    useImperativeHandle(ref, () => ({
      handleNext,
      handlePrev,
      handlePdfNext,
      handlePdfPrev,
      handleGetOriginSize
    }));

    const resizeEnd = throttle(() => {
      const bodyHigh = previewRef.current?.getBoundingClientRect().height || 0;

      // 文件高度 = 整个Modal高度 - title高度 - 底部操作栏高度(文件名+文件列表（文件数量大于1才有）+ 底部工具栏) - padding等边距
      const finalHeight = bodyHigh - (states.mediaListShow && previewInfo?.list?.length > 1 ? previewHeight : toolHigh) - previewTitleHigh.current + 4;
      setScale(1);
      setRotate(0);
      setFileHigh(finalHeight);
      // setFileWidth(previewRef.current?.getBoundingClientRect().width || 0);
    }, 300);
    const previewRefFn = useCallback((e: any) => {
      if (e) {
        // 找到content来进行计算
        const contentDom = domUtils.closest(e, '.ant-modal-content') as HTMLElement;
        previewRef.current = contentDom;
        previewTitleHigh.current = contentDom.querySelector('.ant-modal-header')?.getBoundingClientRect().height || 0;

      }
    }, []);


    const handleResetMoveData = () => {
      // const previewContainer = document.querySelector('.file-drag-container') as HTMLDivElement;
      // previewContainer.style.transform = `translate(0, 0)`;
      dragRef.current?.updatePosition({ x: 0, y: 0 });
      setScale(1);
      setRotate(0);
    }
    const handleUnionImgShow = (show: boolean) => {
      const { selectList, items } = states;
      // 分割为20一个的数组
      const totalUnionList = chunk(selectList, 20)
      if (show) {
        if (selectList.length < 2) {
          MSG._warning('请至少选择2张图片进行并图')
          return
        }
        // if (selectList.length > 20) {
        //   MSG._warning('最多可选20张进行并图')
        //   return
        // }
        const unionList = items.filter((_, mediaIndex) => totalUnionList[0].includes(mediaIndex))
        setStates(data => ({
          ...data,
          unionImgShow: show,
          unionList,
          totalUnionList,
          selectUnionImgIndex: 0,
        }))

      } else {
        setStates(data => ({
          ...data,
          unionImgShow: show,
          unionList: [],
          totalUnionList: [],
          selectUnionImgIndex: 0,
        }));
        requestAnimationFrame(() => {
          handleResetMoveData();
        })
      }
    }

    // 切换缩略图列表是否展示
    const handleToggleMediaListShow = () => {
      setStates((data) => ({ ...data, mediaListShow: !data.mediaListShow }))
    }
    // 并图勾选中
    const handleUnionSelecting = (show: boolean) => {
      if (!states.mediaListShow) return;
      setStates(data => ({
        ...data,
        unionSelecting: show
      }));
    }

    // 多选
    const handleMediaListSelect = (index: number) => {
      const { unionSelecting, selectList = [] } = states;
      if (unionSelecting) {
        let newSelectList = [...selectList]
        if (newSelectList.includes(index)) {
          newSelectList = newSelectList.filter(item => item !== index)
        } else {
          newSelectList.push(index)
        }
        setStates(data => ({
          ...data,
          selectList: newSelectList
        }));
      } else {
        if (index === states.index) return;
        setFileHigh(0);
        setSelectAttachment(() => allAttachment[index]);
        setPageIndex(index);
        setStates(data => ({ ...data, index }));
        if (allAttachment[index]['isNotImg']) {
          resizeEnd();
        }
      }
    }

    //全选
    const handleSelectAll = (selectList: number[]) => {
      // const selectList = states.items?.map((_, index) => index);
      setStates((data) => ({ ...data, selectList }))
    }

    //反选
    const handleSelectReverse = (deSelectList: number[]) => {
      setStates((data) => ({ ...data, selectList: deSelectList }))
    }
    const handleNext = () => {
      const { index, items, unionImgShow, unionList, selectUnionImgIndex, totalUnionList } = states;
      // 如果是并图模式
      if (unionImgShow && unionList?.length) {
        if (selectUnionImgIndex >= totalUnionList.length - 1) return;
        const nextIndex = selectUnionImgIndex + 1;
        const newUnionList = items.filter((_, mediaIndex) => totalUnionList[nextIndex].includes(mediaIndex))
        setStates(data => ({ ...data, index: nextIndex, selectUnionImgIndex: nextIndex, unionList: newUnionList }))
      } else {
        if (index >= items.length - 1) return;
        setFileHigh(0);
        const nextIndex = index + 1;
        const matchItem = items[nextIndex];
        setSelectAttachment(matchItem);
        setPageIndex(1);
        setStates(data => ({ ...data, index: nextIndex }));
        if (matchItem['isNotImg']) {
          resizeEnd();
        }
      }
    }
    const handlePrev = () => {
      const { index, items, unionImgShow, unionList, selectUnionImgIndex, totalUnionList } = states;
      // 如果是并图模式
      if (unionImgShow && unionList?.length) {
        if (selectUnionImgIndex === 0) return;
        const prevIndex = selectUnionImgIndex - 1;
        const newUnionList = items.filter((_, mediaIndex) => totalUnionList[prevIndex].includes(mediaIndex))

        setStates(data => ({ ...data, index: prevIndex, selectUnionImgIndex: prevIndex, unionList: newUnionList }))
      } else {
        if (index === 0) return;
        setFileHigh(0);
        const prevIndex = index - 1;
        const matchItem = items[prevIndex];
        setSelectAttachment(matchItem);
        setPageIndex(1);
        setStates(data => ({ ...data, index: prevIndex }));
        if (matchItem['isNotImg']) {
          resizeEnd();
        }
      }
    }
    const handlePdfNext = () => selectedAttachment.isNotImg && setPageIndex((index) => index + 1 > pageNumber ? index : index + 1);
    const handlePdfPrev = () => selectedAttachment.isNotImg && setPageIndex((index) => index - 1 === 0 ? index : index - 1);
    const handleGetOriginSize = async (isResetMaxWidth?: boolean) => {
      handleResetMoveData();
      // 获取原始尺寸
      if (!selectedAttachment.isNotImg) {
        // 如果是显示原始尺寸
        if (isResetMaxWidth) {
          setMaxImgWidth(undefined);
          setPreviewImgInfo({
            width: undefined,
            height: undefined
          })
        }
        setScale(1);
      } else {
        requestAnimationFrame(() => {
          resizeEnd();
        });
      }

    }
    const handleSetImgMatch = () => {
      // 如果是图片
      if (!selectedAttachment.isNotImg) {
        setMaxImgWidth('100%');
        const { width, height } = previewRef.current?.getBoundingClientRect();
        const finalHeight = height - (states.mediaListShow && previewInfo?.list?.length > 1 ? previewHeight : toolHigh) - previewTitleHigh.current + 4;
        setFileHigh('auto');

        setPreviewImgInfo({
          width: Number(width) > 0 ? width + 'px' : undefined,
          height: Number(finalHeight) > 0 ? finalHeight + 'px' : undefined
        });
      } else {
        resizeEnd();
      }
      handleResetMoveData();
    };
    const handleImgLoad = () => {
      handleSetImgMatch();
      // handleGetOriginSize();
    }
    useEffect(() => {
      if (previewInfo) {
        const { list = [], index = 0, isNotImg } = previewInfo;
        const matchItem = list?.[index] ?? {};
        // handleSetAttachment(matchItem);
        setSelectAttachment(matchItem)
        setAllAttachment(list);
        setStates((data) => ({
          ...data,
          items: list ?? [],
          index,
          // mediaListShow: !isNotImg
        }))
      }
      // document.body.addEventListener(ResizeEvent.DIALOGRESIZEENDEVENT, resizeEnd);
      return () => {
        // document.body.removeEventListener(ResizeEvent.DIALOGRESIZEENDEVENT, resizeEnd);
      };
    }, []);

    return (
      <div className="preview-body" ref={previewRefFn}>
        {
          states.unionImgShow ? (
            <div
              className="preview-pdf-container"
              style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}
            >
              {/* 左右箭头 */}
              {
                (states.unionList?.length > 1) ? (
                  <>
                    <div className={`arrow-icon l ${states.selectUnionImgIndex < 1 ? 'disabled' : ''}`} onClick={handlePrev}>
                      <Icon icon="#icon-tooltool_left" symbol></Icon>
                    </div>
                    <div className={`arrow-icon r ${states.selectUnionImgIndex >= states.totalUnionList.length - 1 ? 'disabled' : ''}`} onClick={handleNext}>
                      <Icon icon="#icon-tooltool_right" symbol></Icon>
                    </div>
                  </>
                ) : null
              }
              <UnionImgContent
                unionList={states.unionList ?? []}
                handleUnionImgShow={handleUnionImgShow}
                onClose={onClose}
              />
            </div>
          ) : (
            <div
              className="preview-pdf-container"
              style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}
              onWheel={onWheel}
            >
              {/* 左右箭头 */}
              {
                (states.items?.length > 1) ? (
                  <>
                    <div className={`arrow-icon l ${states.index < 1 ? 'disabled' : ''}`} onClick={handlePrev}>
                      <Icon icon="#icon-tooltool_left" symbol></Icon>
                    </div>
                    <div className={`arrow-icon r ${states.index >= states.items?.length - 1 ? 'disabled' : ''}`} onClick={handleNext}>
                      <Icon icon="#icon-tooltool_right" symbol></Icon>
                    </div>
                  </>
                ) : null
              }

              <div className={'preview-scroll-container'} style={{ minHeight: '100%' }}>
                <Rnd
                  ref={ref => dragRef.current = ref}
                  enableResizing={false}
                  bounds={undefined}
                  className='file-drag-container'
                  dragHandleClassName="file-preview-handler"
                  maxWidth={maxImgWidth}
                  // default={{ x: undefined, y: undefined, width: 'auto', height: 'auto' }}
                  style={{ position: 'inherit', minHeight }}
                  onDragStart={() => setDragging(() => true)}
                  onDragStop={() => setDragging(() => false)}
                >
                  <div className="file-preview-handler"
                    style={{ transform: `scale(${scale}) rotate(${rotate}deg)` }}
                  >
                    {!selectedAttachment.isNotImg ? (
                      <Image style={{ transformOrigin: 'center', pointerEvents: dragging ? 'none' : 'auto', maxWidth: previewImgInfo.width, maxHeight: previewImgInfo.height }} width={'auto'} height={FileHigh} src={selectedAttachment.originalSrc} preview={false} onLoad={handleImgLoad} />
                    ) : (
                      <Document
                        className="preview-pdf"
                        file={selectedAttachment.originalSrc}
                        // file="https://sasdev.sanfu.com/saas_dev/api/v1/download/FORM_ALL_FILE_MULTI/72b3689130b5460e81a66439a8717b63?chunk=0&previewAddr=true"
                        // file="https://sasdev.sanfu.com/saas_dev/api/v1/download/FORM_ALL_FILE_ONE/988130820110438706?chunk=0&previewAddr=true"
                        options={{ cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`, cMapPacked: true }}
                        error={<span style={{ color: 'black', fontSize: 18 }}>{`无法加载PDF文件`}</span>}
                        onLoadSuccess={(data: { numPages: number }) => {
                          handleImgLoad();
                          setPageIndex(1);
                          setPageNumber(data.numPages);
                        }}
                        loading={<Spin style={{ margin: 'auto' }} />}
                      >
                        <Page className="preview-pdf-page" height={isPdf(selectedAttachment?.title ?? '') ? FileHigh : undefined} pageNumber={pageIndex} loading={<Spin />} />
                      </Document>
                    )
                    }
                  </div>

                </Rnd>
              </div>

            </div>

          )
        }
        {
          !states.unionImgShow ? (
            <div className={`preview-box-fileName ${states.mediaListShow && states.items.length > 1 ? 'showList' : ''}`}>{selectedAttachment.title}</div>
          ) : null
        }
        {/* 底部列表浏览 */}
        {
          states.mediaListShow && !states.unionImgShow && states.items.length > 1 ? (
            <MediaShowList
              mediaList={states.items ?? []}
              currentIndex={states.index}
              mediaListShow={states.mediaListShow ?? false}
              unionImgShow={states.unionImgShow}
              selectList={states.selectList ?? []}
              unionSelecting={states.unionSelecting ?? false}
              handleMediaListSelect={handleMediaListSelect}
              handleUnionImgShow={handleUnionImgShow}
              handleUnionSelecting={handleUnionSelecting}
              handleSelectAll={handleSelectAll}
              handleSelectReverse={handleSelectReverse}
            />
          ) : null
        }

        {!states.unionImgShow ? (<div className="preview-tools">
          {selectedAttachment.isNotImg ? (
            <>
              {/* 文件预览部分 */}
              <div className="preview-tools-item preview-tools-item-index">
                {pageIndex}&nbsp;/&nbsp;{pageNumber}
              </div>
              <Tooltip title="上一页" placement='top'>
                <Button
                  className={`preview-tools-item ${pageIndex <= 1 ? 'disabled' : ''}`}
                  type="text"
                  icon={<Icon icon="#icon-tooltool_left" symbol />}
                  onClick={handlePdfPrev}
                />
              </Tooltip>
              <Tooltip title="下一页" placement='top'>
                <Button
                  className={`preview-tools-item ${pageIndex == pageNumber ? 'disabled' : ''}`}
                  type="text"
                  icon={<Icon icon="#icon-tooltool_right" symbol />}
                  onClick={handlePdfNext}
                />
              </Tooltip>
            </>
          ) : (
            <div className="preview-tools-item preview-tools-item-index">
              {states.index + 1}&nbsp;/&nbsp;{states.items?.length}
            </div>
          )}
          {/* <Tooltip title="上一个" placement='top'>

            <Button
              className={`preview-tools-item ${states.index < 1 ? 'disabled' : ''}`}
              type="text"
              icon={<Icon icon="#icon-tooltool_left" symbol />}
              onClick={handlePrev}
            />
          </Tooltip>
          <Tooltip title="下一个" placement='top'>
            <Button
              className={`preview-tools-item ${states.index >= states.items?.length - 1 ? 'disabled' : ''}`}
              type="text"
              icon={<Icon icon="#icon-tooltool_right" symbol />}
              onClick={handleNext}
            />
          </Tooltip> */}
          <Tooltip title="左转" placement='top'>
            <Button
              className="preview-tools-item"
              type="link"
              icon={<Icon icon="#icon-toolimage_turnleft" symbol />}
              onClick={() => {
                setRotate((rotate) => rotate - 90);
              }}
            />
          </Tooltip>
          <Tooltip title="右转" placement='top'>
            <Button
              className="preview-tools-item"
              type="link"
              icon={<Icon icon="#icon-toolimage-turnright" symbol />}
              title="右转"
              onClick={() => {
                setRotate((rotate) => rotate + 90);
              }}
            />
          </Tooltip>
          <Tooltip title="缩小" placement='top'>
            <Button
              type="link"
              icon={<Icon icon="#icon-toolimage_turnsmall" symbol />}
              className="preview-tools-item"
              onClick={() => setScale((value) => Number(Number(value - 0.2 <= 0.2 ? 0.2 : value - 0.2).toFixed(1)))}
              title="缩小"
            />
          </Tooltip>
          <Tooltip title="原始尺寸" placement='top'>

            <Button
              type="link"
              icon={<Icon icon="#icon-toolimage_turnreturn" symbol />}
              className="preview-tools-item"
              onClick={async () => handleGetOriginSize(true)}
            />
          </Tooltip>
          <Tooltip title="放大" placement='top'>
            <Button type="link" icon={<Icon icon="#icon-toolimage_turnlarge" symbol />} className="preview-tools-item" onClick={() => setScale((value) => Number(Number(value + 0.2).toFixed(1)))} />
          </Tooltip>
          <Tooltip title="适应图片" placement='top'>
            <Button type="link" icon={<Icon icon="#icon-toolimage_turnmarch" symbol />} className="preview-tools-item" onClick={() => handleSetImgMatch()} />
          </Tooltip>
          <Tooltip title="下载" placement='top'>
            <Button
              type="link"
              onClick={async (e) => {
                if (Shell.hasShell()) {
                  e.preventDefault();
                  const res = await Shell.download(selectedAttachment.originalSrc, selectedAttachment.title);
                  if (res.success) {
                    MSG._success('执行成功');
                  } else {
                    MSG._error(res.msg || 'download error');
                  }
                }
              }}
              className="preview-tools-item"
              href={selectedAttachment.downloadSrc}
              download={selectedAttachment.title}
              icon={<Icon icon="#icon-toolimage_download" symbol />}
            />
          </Tooltip>
          {
            !selectedAttachment.isNotImg ? (
              <>
                {/* <Tooltip title="显示列表" placement='top'>
                  <Button type="link" icon={<Icon icon="#icon-tooltool_list" symbol />} className={`preview-tools-item ${states.mediaListShow ? 'checked' : ''}`} onClick={handleToggleMediaListShow} />
                </Tooltip> */}
                <Tooltip title="并图" placement='top'>
                  <Button type="link" icon={<Icon icon="#icon-toolmarchpic" symbol />} className={`preview-tools-item ${states.unionSelecting ? 'checked' : ''} ${states.mediaListShow && states.items.length > 1 ? '' : 'disabled'}`} onClick={() => handleUnionSelecting(!states.unionSelecting)} />
                </Tooltip>
              </>
            ) : null
          }
        </div>) : null}
      </div>
    );
  });
  /** fileViewer - end */

  return (
    <>
      {React.cloneElement(children as any, {
        onImageEnlarge: handleImageEnlarge
      })}
      {visible ? <DragModal
        className='preview-modal'
        dialogVisible={visible}
        footer={null}
        mask={false}
        centered
        fullHeightOnInit
        width="60%"
        keyHandle={handlePreviewKeydown}
        minHeight={minHeight + toolHigh + previewHeight + 70} // 这个是算了底下的工具栏
        minWidth={minWidth}
        title='文件预览'
        maskClosable={false}
        closeIcon={<CloseOutlined className="preview-close" />}
        destroyOnClose={true}
        getContainer={props.env?.getTopModalContainer}
        resizeable
        canClickBelowDom
        setMaxSize
        drag
        bounds={false}
        transitionName=""
        onCancel={() => onClose()}
      >
        <PcPreview ref={(ref) => pcPreviewRef.current = ref} {...props} />
      </DragModal> : null}
    </>
  )
}


export default themeable(ImageGallery)