import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["prefixCls", "src", "alt", "onClose", "visible", "icons"];
import React, { useEffect, useState, useRef } from 'react';
import cn from 'classnames';
import { CSSTransition } from 'react-transition-group';
import { context } from './PreviewGroup';
var initialPosition = {
  x: 0,
  y: 0
};

var Preview = function Preview(props) {
  var prefixCls = props.prefixCls,
      src = props.src,
      alt = props.alt,
      onClose = props.onClose,
      visible = props.visible,
      _props$icons = props.icons,
      icons = _props$icons === void 0 ? {} : _props$icons,
      restProps = _objectWithoutProperties(props, _excluded);

  var close = icons.close,
      left = icons.left,
      leftDisabled = icons.leftDisabled,
      right = icons.right,
      rightDisabled = icons.rightDisabled,
      rotateLeft = icons.rotateLeft,
      rotateRight = icons.rotateRight,
      zoomIn = icons.zoomIn,
      zoomOut = icons.zoomOut;

  var _useState = useState(1),
      _useState2 = _slicedToArray(_useState, 2),
      scale = _useState2[0],
      setScale = _useState2[1];

  var _useState3 = useState(0),
      _useState4 = _slicedToArray(_useState3, 2),
      rotate = _useState4[0],
      setRotate = _useState4[1];

  var _useState5 = useState({
    wheelDirection: 0
  }),
      _useState6 = _slicedToArray(_useState5, 2),
      lastWheelZoomDirection = _useState6[0],
      setLastWheelZoomDirection = _useState6[1];

  var _useState7 = useState(initialPosition),
      _useState8 = _slicedToArray(_useState7, 2),
      position = _useState8[0],
      setPosition = _useState8[1];

  var imgRef = useRef();

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      isMoving = _React$useState2[0],
      setMoving = _React$useState2[1];

  var originPositionRef = React.useRef({
    deltaX: 0,
    deltaY: 0
  });

  var _React$useContext = React.useContext(context),
      isPreviewGroup = _React$useContext.isPreviewGroup,
      setCurrent = _React$useContext.setCurrent,
      previewUrls = _React$useContext.previewUrls,
      current = _React$useContext.current;

  var previewUrlKeys = Array.from(previewUrls.keys());
  var currentPreviewIndex = previewUrlKeys.indexOf(current);
  var currentPreviewIndexRef = useRef(currentPreviewIndex);
  currentPreviewIndexRef.current = currentPreviewIndex;
  var combinationSrc = isPreviewGroup ? previewUrls.get(current) && previewUrls.get(current).src : src;
  var previewGroupCount = previewUrls.size;
  var showLeftOrRightSwitches = isPreviewGroup && previewGroupCount > 1;

  var handleRestTransform = function handleRestTransform() {
    setScale(1);
    setRotate(0);
    setPosition(initialPosition);
  };

  var onSwitchLeft = function onSwitchLeft(event) {
    event && event.preventDefault();
    event && event.stopPropagation();

    if (currentPreviewIndexRef.current > 0) {
      // setCurrent(currentPreviewIndex - 1);
      setCurrent(function (prevCount) {
        // 通过纯函数进行状态更新
        return prevCount - 1;
      });
      handleRestTransform();
    }
  };

  var onSwitchRight = function onSwitchRight(event) {
    event && event.preventDefault();
    event && event.stopPropagation();

    if (currentPreviewIndexRef.current < previewGroupCount - 1) {
      // setCurrent(currentPreviewIndex + 1);
      setCurrent(function (prevCount) {
        // 通过纯函数进行状态更新
        return prevCount + 1;
      });
      handleRestTransform();
    }
  };

  var onZoomIn = function onZoomIn(e) {
    e && e.stopPropagation && e.stopPropagation();
    setScale(function (value) {
      return value + 1;
    });
    setPosition(initialPosition);
  };

  var onZoomOut = function onZoomOut(e) {
    e && e.stopPropagation && e.stopPropagation();

    if (scale > 1) {
      setScale(function (value) {
        return value - 1;
      });
    }

    setPosition(initialPosition);
  };

  var onRotateLeft = function onRotateLeft(e) {
    e && e.stopPropagation && e.stopPropagation();
    setRotate(function (value) {
      return value - 90;
    });
  };

  var onRotateRight = function onRotateRight(e) {
    e && e.stopPropagation && e.stopPropagation();
    setRotate(function (value) {
      return value + 90;
    });
  };

  var closeTool = [{
    icon: close,
    onClick: onClose,
    type: 'close'
  }];
  var tools = [{
    icon: zoomIn,
    onClick: onZoomIn,
    type: 'zoomIn'
  }, //放大
  {
    icon: zoomOut,
    onClick: onZoomOut,
    type: 'zoomOut',
    disabled: scale === 1
  }, //缩小
  {
    icon: rotateLeft,
    onClick: onRotateLeft,
    type: 'rotateLeft'
  }, {
    icon: rotateRight,
    onClick: onRotateRight,
    type: 'rotateRight'
  }];

  var onWheelMove = function onWheelMove(e) {
    var wheelDirection = e.deltaY;
    setLastWheelZoomDirection({
      wheelDirection: wheelDirection
    });
  };

  useEffect(function () {
    var wheelDirection = lastWheelZoomDirection.wheelDirection;

    if (wheelDirection > 0) {
      onZoomOut();
    } else if (wheelDirection < 0) {
      onZoomIn();
    }
  }, [lastWheelZoomDirection]);

  var onMouseDown = function onMouseDown(event) {
    event.preventDefault();
    event.stopPropagation();
    originPositionRef.current.deltaX = event.pageX - position.x;
    originPositionRef.current.deltaY = event.pageY - position.y;
    setMoving(true);
  };

  var onMouseMove = function onMouseMove(event) {
    event.preventDefault();
    event.stopPropagation();

    if (isMoving) {
      setPosition({
        x: event.pageX - originPositionRef.current.deltaX,
        y: event.pageY - originPositionRef.current.deltaY
      });
    }
  };

  var onMouseUp = function onMouseUp(event) {
    event.preventDefault();
    event.stopPropagation();

    if (isMoving) {
      setMoving(false);
    }
  };

  var handlePreventClick = function handlePreventClick(event) {
    event.preventDefault();
    event.stopPropagation();
  };

  var handleKeydownFn = function handleKeydownFn(event) {
    if (event.keyCode === 27) {
      onClose();
    }

    if (event.keyCode === 37) {
      onSwitchLeft();
    }

    if (event.keyCode === 39) {
      onSwitchRight();
    }
  };

  useEffect(function () {
    if (visible) {
      handleRestTransform();
      window.addEventListener('wheel', onWheelMove, {
        passive: false
      });
      window.addEventListener('keydown', handleKeydownFn);
      return function () {
        window.removeEventListener('wheel', onWheelMove, {
          passive: false
        });
        window.removeEventListener('keydown', handleKeydownFn);
      };
    }
  }, [visible]);
  return /*#__PURE__*/React.createElement("div", {
    className: cn("".concat(prefixCls), _defineProperty({}, "".concat(prefixCls, "-auto"), visible))
  }, visible && /*#__PURE__*/React.createElement(React.Fragment, null, closeTool.map(function (_ref) {
    var icon = _ref.icon,
        onClick = _ref.onClick,
        type = _ref.type,
        disabled = _ref.disabled;
    return /*#__PURE__*/React.createElement("div", {
      onClick: onClick,
      key: type,
      className: cn("".concat(prefixCls, "-operations-close"))
    }, icon);
  }), /*#__PURE__*/React.createElement("ul", {
    className: "".concat(prefixCls, "-operations-btns")
  }, tools.map(function (_ref2) {
    var icon = _ref2.icon,
        onClick = _ref2.onClick,
        type = _ref2.type,
        disabled = _ref2.disabled;
    return /*#__PURE__*/React.createElement("li", {
      onClick: onClick,
      key: type,
      className: cn(_defineProperty({}, "".concat(prefixCls, "-operations-btn-disabled"), !!disabled))
    }, icon);
  }))), /*#__PURE__*/React.createElement(CSSTransition, {
    in: visible,
    timeout: 300,
    classNames: 'fade',
    unmountOnExit: true,
    appear: true
  }, /*#__PURE__*/React.createElement("div", {
    "aria-hidden": "true",
    onClick: onClose,
    className: "".concat(prefixCls, "-wrap")
  }, /*#__PURE__*/React.createElement("img", {
    src: combinationSrc,
    className: "".concat(prefixCls, "-img"),
    style: {
      transform: "translate3d(".concat(position.x, "px, ").concat(position.y, "px, 0) scale3d(").concat(scale, ", ").concat(scale, ", 1) rotate(").concat(rotate, "deg) ")
    },
    onMouseDown: onMouseDown,
    onMouseMove: onMouseMove,
    onMouseUp: onMouseUp,
    ref: imgRef,
    onClick: handlePreventClick
  }))), visible && /*#__PURE__*/React.createElement(React.Fragment, null, showLeftOrRightSwitches && /*#__PURE__*/React.createElement("div", {
    className: cn("".concat(prefixCls, "-switch-left")),
    onClick: onSwitchLeft
  }, currentPreviewIndex === 0 ? leftDisabled : left), showLeftOrRightSwitches && /*#__PURE__*/React.createElement("div", {
    className: cn("".concat(prefixCls, "-switch-right")),
    onClick: onSwitchRight
  }, currentPreviewIndex === previewGroupCount - 1 ? rightDisabled : right)));
};

export default Preview;