import React, { useCallback, useState } from 'react';
import DraggableModal from './DraggableModal';
import DraggableModalProvider from './DraggableModalProvider';
import '../../../node_modules/antd/dist/antd.less';
import './index.less';
import {
  ZoomInOutlined,
  ZoomOutOutlined,
  RotateLeftOutlined,
  RotateRightOutlined,
  SyncOutlined,
} from '@ant-design/icons';
const ImagePreview = ({ src, visible, setOpen }: any) => {
  const onOk = useCallback(() => setOpen(true), [setOpen]);
  const onCancel = useCallback(() => setOpen(false), [setOpen]);
  const [scale, setScale] = useState<number>(1);
  const [rotate, setRotate] = useState<number>(0);
  const [style, setStyle] = useState<any>({
    transform: 'scale(1) rotate(0)',
    transformOrigin: 'center center',
  });
  const translateHandle = (e: string) => {
    switch (e) {
      case '+':
        {
          const _scale = +(scale + 0.1).toFixed(1);
          setScale(_scale);
          setStyle({
            ...style,
            transform: `scale( ${_scale}) rotate(${rotate}deg)`,
          });
        }
        break;
      case '-':
        if (scale > 1) {
          const _scale = +(scale - 0.1).toFixed(1);
          setScale(_scale);
          setStyle({
            ...style,
            transform: `scale( ${_scale}) rotate(${rotate}deg)`,
          });
        }
        break;
      case 'left':
        {
          const _rotate = rotate + 90;
          setRotate(_rotate);
          setStyle({
            ...style,
            transform: `scale( ${scale}) rotate(${_rotate}deg)`,
          });
        }
        break;
      case 'right':
        {
          const _rotate = rotate - 90;
          setRotate(_rotate);
          setStyle({
            ...style,
            transform: `scale( ${scale}) rotate(${_rotate}deg)`,
          });
        }
        break;
      case 'refresh':
        setStyle({
          ...style,
          transform: `rotate(${rotate}deg)`,
          width: `${scale * 100}%`,
        });
        break;
      default:
        break;
    }
  };
  return (
    <DraggableModalProvider>
      <DraggableModal
        initialWidth={600}
        initialHeight={525}
        zIndex={999999}
        title="图片预览"
        footer={null}
        visible={visible}
        onOk={onOk}
        onCancel={onCancel}
      >
        <div className="preview-root">
          <div className="preview-btn">
            <RotateLeftOutlined
              onClick={() => translateHandle('left')}
              className="preview-btn-item"
            />
            <RotateRightOutlined
              onClick={() => translateHandle('right')}
              className="preview-btn-item"
            />
            <SyncOutlined
              onClick={() => translateHandle('refresh')}
              className="preview-btn-item"
            />
            <ZoomOutOutlined
              style={{
                cursor: scale > 1 ? 'pointer' : 'default',
                color:
                  scale > 1 ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,0.25)',
              }}
              onClick={() => translateHandle('-')}
              className="preview-btn-item"
            />
            <ZoomInOutlined
              onClick={() => translateHandle('+')}
              className="preview-btn-item"
            />
          </div>
          <div className="preview-wrapper">
            <img
              style={{
                ...style,
              }}
              className="preview-image"
              src={src}
              alt="图片加载异常"
            />
          </div>
        </div>
      </DraggableModal>
    </DraggableModalProvider>
  );
};

export default ImagePreview;