"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _components = require("../components");

var _context = require("../config-provider/context");

var _addEventListener = _interopRequireDefault(require("../components/rc-util/Dom/addEventListener"));

var _icon = _interopRequireDefault(require("../icon"));

var CloseFill = _icon.default.CloseFill,
    LeftFill = _icon.default.LeftFill,
    RightFill = _icon.default.RightFill,
    ZoomInLine = _icon.default.ZoomInLine,
    ZoomOutLine = _icon.default.ZoomOutLine,
    FullScreenLine = _icon.default.FullScreenLine,
    ExitFullScreenLine = _icon.default.ExitFullScreenLine,
    RotateLeftOutlinedLine = _icon.default.RotateLeftOutlinedLine,
    RotateRightOutlinedLine = _icon.default.RotateRightOutlinedLine;
var __BASE_DEG__ = 90;

var Preview = function Preview(props) {
  var children = props.children,
      customPrefixCls = props.prefixCls,
      customCloseIcon = props.closeIcon,
      images = props.images,
      curIndex = props.curIndex,
      functions = props.functions,
      visible = props.visible,
      reset = (0, _objectWithoutProperties2.default)(props, ["children", "prefixCls", "closeIcon", "images", "curIndex", "functions", "visible"]);

  var originPositionRef = _react.default.useRef({
    originX: 0,
    originY: 0,
    preSubstractX: 0,
    preSubstractY: 0
  });

  var _React$useContext = _react.default.useContext(_context.ConfigContext),
      getPrefixClassName = _React$useContext.getPrefixClassName;

  var previewPrefixCls = getPrefixClassName('preview', customPrefixCls);

  var _React$useState = _react.default.useState(curIndex !== undefined ? curIndex + 1 : 1),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      index = _React$useState2[0],
      setIndex = _React$useState2[1];

  var _React$useState3 = _react.default.useState(0),
      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
      rotate = _React$useState4[0],
      setRotate = _React$useState4[1];

  var _React$useState5 = _react.default.useState(1),
      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
      zoom = _React$useState6[0],
      setZoom = _React$useState6[1];

  var _React$useState7 = _react.default.useState(false),
      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
      moving = _React$useState8[0],
      setMoving = _React$useState8[1];

  var _React$useState9 = _react.default.useState(false),
      _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
      fullScreen = _React$useState10[0],
      setFullScreen = _React$useState10[1];

  var _React$useState11 = _react.default.useState({
    x: 0,
    y: 0
  }),
      _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
      position = _React$useState12[0],
      setPosition = _React$useState12[1];

  var onNextClick = function onNextClick() {
    var num;

    if (images && index < (images === null || images === void 0 ? void 0 : images.length)) {
      num = index + 1;
      setIndex(num);
    }
  };

  var onPrevClick = function onPrevClick() {
    var num;

    if (index > 1) {
      num = index - 1;
      setIndex(num);
    }
  };

  var onImageOperation = function onImageOperation(type) {
    switch (type) {
      case 0:
        setFullScreen(!fullScreen);
        break;

      case 1:
        setRotate(rotate - __BASE_DEG__);
        break;

      case 2:
        setRotate(rotate + __BASE_DEG__);
        break;

      case 3:
        setZoom(zoom + 1);
        break;

      case 4:
        if (zoom <= 1) return;
        setZoom(zoom - 1);
        break;

      default:
        break;
    }
  };

  var onImgMouseDown = function onImgMouseDown(e) {
    e.stopPropagation();
    e.preventDefault();
    originPositionRef.current.originX = e.pageX;
    originPositionRef.current.originY = e.pageY;
    setMoving(true);
  };

  var onMouseMove = function onMouseMove(e) {
    if (moving && visible) {
      var substractX = e.pageX - originPositionRef.current.originX + originPositionRef.current.preSubstractX;
      var substractY = e.pageY - originPositionRef.current.originY + originPositionRef.current.preSubstractY;
      setPosition({
        x: substractX,
        y: substractY
      });
    }
  };

  var onMouseUp = function onMouseUp(e) {
    if (visible) {
      setMoving(false);
      originPositionRef.current.preSubstractX = position.x;
      originPositionRef.current.preSubstractY = position.y;
    }
  };

  _react.default.useEffect(function () {
    setIndex(curIndex + 1);
  }, [curIndex]);

  _react.default.useEffect(function () {
    var mouseMoveListener = (0, _addEventListener.default)(window, 'mousemove', onMouseMove, false);
    var mouseUpListener = (0, _addEventListener.default)(window, 'mouseup', onMouseUp, false);
    return function () {
      mouseMoveListener.remove();
      mouseUpListener.remove();
    };
  }, [moving, position, visible]); // 由于走马灯组件暂时没有，这里先直接使用简单的图片展示方式


  var renderModalContent = function renderModalContent() {
    var _classNames, _images;

    var getRenderItem = function getRenderItem(element, itemIndex) {
      return /*#__PURE__*/_react.default.createElement("div", {
        onClick: function onClick() {
          return onImageOperation(itemIndex);
        }
      }, element);
    };

    var __FUNCICONS__ = [!fullScreen ? /*#__PURE__*/_react.default.createElement(FullScreenLine, null) : /*#__PURE__*/_react.default.createElement(ExitFullScreenLine, null), /*#__PURE__*/_react.default.createElement(RotateLeftOutlinedLine, null), /*#__PURE__*/_react.default.createElement(RotateRightOutlinedLine, null), /*#__PURE__*/_react.default.createElement(ZoomInLine, null), /*#__PURE__*/_react.default.createElement(ZoomOutLine, null), /*#__PURE__*/_react.default.createElement("span", {
      className: "".concat(previewPrefixCls, "-info-scale")
    }, "1:", zoom)].map(getRenderItem);

    if (typeof functions === 'function') {
      __FUNCICONS__ = functions(__FUNCICONS__);
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: "".concat(previewPrefixCls, "-info")
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames.default)("".concat(previewPrefixCls, "-info-img"), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(previewPrefixCls, "-info-img-fullScreen"), fullScreen), (0, _defineProperty2.default)(_classNames, "".concat(previewPrefixCls, "-info-img-moving"), moving), _classNames)),
      style: {
        transform: "translate3d(".concat(position.x, "px, ").concat(position.y, "px, 0)")
      }
    }, /*#__PURE__*/_react.default.createElement("img", {
      style: {
        transform: "rotate(".concat(rotate, "deg) scale3d(").concat(zoom, ", ").concat(zoom, ", 1)")
      },
      onMouseDown: onImgMouseDown,
      src: images === null || images === void 0 ? void 0 : (_images = images[index - 1]) === null || _images === void 0 ? void 0 : _images.url,
      alt: "loading..."
    })), /*#__PURE__*/_react.default.createElement("span", {
      className: (0, _classnames.default)("".concat(previewPrefixCls, "-info-index"), (0, _defineProperty2.default)({}, "".concat(previewPrefixCls, "-info-indexTop"), functions))
    }, index, "/", images === null || images === void 0 ? void 0 : images.length), functions ? /*#__PURE__*/_react.default.createElement("div", {
      className: "".concat(previewPrefixCls, "-info-functions")
    }, __FUNCICONS__.map(function (element, eleIndex) {
      return /*#__PURE__*/_react.default.createElement("div", {
        key: eleIndex
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(previewPrefixCls, "-info-function")
      }, element));
    })) : null, index !== 1 && /*#__PURE__*/_react.default.createElement("button", {
      type: "button",
      className: "".concat(previewPrefixCls, "-info-prev"),
      onClick: onPrevClick
    }, /*#__PURE__*/_react.default.createElement(LeftFill, null)), index !== (images === null || images === void 0 ? void 0 : images.length) && /*#__PURE__*/_react.default.createElement("button", {
      type: "button",
      className: "".concat(previewPrefixCls, "-info-next"),
      onClick: onNextClick
    }, /*#__PURE__*/_react.default.createElement(RightFill, null)));
  };

  var renderPreviewModal = function renderPreviewModal() {
    var defaultIcon = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CloseFill, null));

    return /*#__PURE__*/_react.default.createElement(_components.RcDialog, Object.assign({
      closeIcon: customCloseIcon || defaultIcon,
      prefixCls: previewPrefixCls,
      visible: visible
    }, reset), renderModalContent());
  };

  return renderPreviewModal();
};

var _default = Preview;
exports.default = _default;