"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.previewProps = exports.default = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _classNames = _interopRequireDefault(require("../../_util/classNames"));
var _vcDialog = _interopRequireDefault(require("../../vc-dialog"));
var _IDialogPropTypes = require("../../vc-dialog/IDialogPropTypes");
var _css = require("../../vc-util/Dom/css");
var _addEventListener = _interopRequireDefault(require("../../vc-util/Dom/addEventListener"));
var _KeyCode = _interopRequireDefault(require("../../_util/KeyCode"));
var _warning = require("../../vc-util/warning");
var _useFrameSetState3 = _interopRequireDefault(require("./hooks/useFrameSetState"));
var _getFixScaleEleTransPosition = _interopRequireDefault(require("./getFixScaleEleTransPosition"));
var _PreviewOperations = _interopRequireDefault(require("./PreviewOperations"));
var _CloseFilled = _interopRequireDefault(require("@pf-ui/pf-icons-vue/CloseFilled"));
var _PreviewGroup = require("./PreviewGroup");
var initialPosition = {
  x: 0,
  y: 0
};
var ScaleRange = 0.08;
var previewProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _IDialogPropTypes.dialogPropTypes)()), {}, {
  src: String,
  alt: String,
  rootClassName: String,
  icons: {
    type: Object,
    default: function _default() {
      return {};
    }
  },
  minScale: {
    type: Number,
    default: 0.1
  },
  maxScale: {
    type: Number,
    default: 50
  }
});
exports.previewProps = previewProps;
var Preview = (0, _vue.defineComponent)({
  name: 'Preview',
  inheritAttrs: false,
  props: previewProps,
  emits: ['close', 'afterClose'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit,
      attrs = _ref.attrs;
    var scale = (0, _vue.ref)(1);
    var rotate = (0, _vue.ref)(0);
    var _useFrameSetState = (0, _useFrameSetState3.default)(initialPosition),
      _useFrameSetState2 = (0, _slicedToArray2.default)(_useFrameSetState, 2),
      position = _useFrameSetState2[0],
      setPosition = _useFrameSetState2[1];
    var onClose = function onClose() {
      return emit('close');
    };
    var imgRef = (0, _vue.ref)();
    var originPositionRef = (0, _vue.reactive)({
      originX: 0,
      originY: 0,
      deltaX: 0,
      deltaY: 0
    });
    var isMoving = (0, _vue.ref)(false);
    var groupContext = _PreviewGroup.context.inject();
    var previewUrls = groupContext.previewUrls,
      current = groupContext.current,
      isPreviewGroup = groupContext.isPreviewGroup,
      setCurrent = groupContext.setCurrent;
    var previewGroupCount = (0, _vue.computed)(function () {
      return previewUrls.value.size;
    });
    var previewUrlsKeys = (0, _vue.computed)(function () {
      return Array.from(previewUrls.value.keys());
    });
    var currentPreviewIndex = (0, _vue.computed)(function () {
      return previewUrlsKeys.value.indexOf(current.value);
    });
    var combinationSrc = (0, _vue.computed)(function () {
      return isPreviewGroup.value ? previewUrls.value.get(current.value) : props.src;
    });
    var showLeftOrRightSwitches = (0, _vue.computed)(function () {
      return isPreviewGroup.value && previewGroupCount.value > 1;
    });
    var lastWheelZoomDirection = (0, _vue.ref)({
      wheelDirection: 0
    });
    var rotateMap = (0, _vue.reactive)({});
    var rotateSaveDisabled = (0, _vue.computed)(function () {
      return rotate.value % 360 === (rotateMap[combinationSrc.value] || 0);
    });
    var onAfterClose = function onAfterClose() {
      scale.value = 1;
      rotate.value = 0;
      setPosition(initialPosition);
      emit('afterClose');
    };
    var setScale = function setScale(value) {
      scale.value = value;
      setPosition(initialPosition);
    };
    var onZoomIn = function onZoomIn() {
      if (scale.value < props.maxScale) {
        var _scale = scale.value + ScaleRange;
        scale.value = _scale > props.maxScale ? props.maxScale : _scale;
      }
      setPosition(initialPosition);
    };
    var onZoomOut = function onZoomOut() {
      if (scale.value > props.minScale) {
        var _scale = scale.value - ScaleRange;
        scale.value = _scale > props.minScale ? _scale : props.minScale;
      }
      setPosition(initialPosition);
    };
    var onRotateRight = function onRotateRight() {
      rotate.value += 90;
    };
    var onRotateLeft = function onRotateLeft() {
      rotate.value -= 90;
    };
    var initRotateValue = function initRotateValue() {
      rotate.value = rotateMap[combinationSrc.value] || 0;
    };
    var onRotateSave = function onRotateSave() {
      var rotateValue = rotate.value % 360;
      rotateMap[combinationSrc.value] = rotateValue;
    };
    var handleSwitchLeft = function handleSwitchLeft() {
      var nextIndex = currentPreviewIndex.value > 0 ? currentPreviewIndex.value - 1 : previewUrlsKeys.value.length - 1;
      setCurrent(previewUrlsKeys.value[nextIndex]);
      initRotateValue();
    };
    var handleSwitchRight = function handleSwitchRight() {
      var nextIndex = currentPreviewIndex.value < previewGroupCount.value - 1 ? currentPreviewIndex.value + 1 : 0;
      setCurrent(previewUrlsKeys.value[nextIndex]);
      initRotateValue();
    };
    var wrapClassName = (0, _classNames.default)((0, _defineProperty2.default)({}, "".concat(props.prefixCls, "-moving"), isMoving.value));
    var onMouseUp = function onMouseUp() {
      if (props.visible && isMoving.value) {
        var width = imgRef.value.offsetWidth * scale.value;
        var height = imgRef.value.offsetHeight * scale.value;
        var _getOffset = (0, _css.getOffset)(imgRef.value),
          left = _getOffset.left,
          top = _getOffset.top;
        var isRotate = rotate.value % 180 !== 0;
        isMoving.value = false;
        var fixState = (0, _getFixScaleEleTransPosition.default)(isRotate ? height : width, isRotate ? width : height, left, top);
        if (fixState) {
          setPosition((0, _objectSpread2.default)({}, fixState));
        }
      }
    };
    var onMouseDown = function onMouseDown(event) {
      // Only allow main button
      if (event.button !== 0) return;
      event.preventDefault();
      // Without this mask close will abnormal
      event.stopPropagation();
      originPositionRef.deltaX = event.pageX - position.x;
      originPositionRef.deltaY = event.pageY - position.y;
      originPositionRef.originX = position.x;
      originPositionRef.originY = position.y;
      isMoving.value = true;
    };
    var onMouseMove = function onMouseMove(event) {
      if (props.visible && isMoving.value) {
        setPosition({
          x: event.pageX - originPositionRef.deltaX,
          y: event.pageY - originPositionRef.deltaY
        });
      }
    };
    var onWheelMove = function onWheelMove(event) {
      if (!props.visible) return;
      event.preventDefault();
      var wheelDirection = event.deltaY;
      lastWheelZoomDirection.value = {
        wheelDirection: wheelDirection
      };
    };
    var onKeyDown = function onKeyDown(event) {
      if (!props.visible || !showLeftOrRightSwitches.value) return;
      event.preventDefault();
      if (event.keyCode === _KeyCode.default.LEFT) {
        handleSwitchLeft();
      } else if (event.keyCode === _KeyCode.default.RIGHT) {
        handleSwitchRight();
      }
    };
    var onDoubleClick = function onDoubleClick() {
      if (props.visible) {
        if (scale.value !== 1) {
          scale.value = 1;
        }
        if (position.x !== initialPosition.x || position.y !== initialPosition.y) {
          setPosition(initialPosition);
        }
      }
    };
    var removeListeners = function removeListeners() {};
    (0, _vue.onMounted)(function () {
      (0, _vue.watch)([function () {
        return props.visible;
      }, isMoving], function (_ref2) {
        var _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
          newVisible = _ref3[0];
        newVisible && initRotateValue();
        removeListeners();
        var onTopMouseUpListener;
        var onTopMouseMoveListener;
        var onMouseUpListener = (0, _addEventListener.default)(window, 'mouseup', onMouseUp, false);
        var onMouseMoveListener = (0, _addEventListener.default)(window, 'mousemove', onMouseMove, false);
        var onScrollWheelListener = (0, _addEventListener.default)(window, 'wheel', onWheelMove, {
          passive: false
        });
        var onKeyDownListener = (0, _addEventListener.default)(window, 'keydown', onKeyDown, false);
        try {
          // Resolve if in iframe lost event
          /* istanbul ignore next */
          if (window.top !== window.self) {
            onTopMouseUpListener = (0, _addEventListener.default)(window.top, 'mouseup', onMouseUp, false);
            onTopMouseMoveListener = (0, _addEventListener.default)(window.top, 'mousemove', onMouseMove, false);
          }
        } catch (error) {
          /* istanbul ignore next */
          (0, _warning.warning)(false, "[vc-image] ".concat(error));
        }
        removeListeners = function removeListeners() {
          onMouseUpListener.remove();
          onMouseMoveListener.remove();
          onScrollWheelListener.remove();
          onKeyDownListener.remove();
          /* istanbul ignore next */
          if (onTopMouseUpListener) onTopMouseUpListener.remove();
          /* istanbul ignore next */
          if (onTopMouseMoveListener) onTopMouseMoveListener.remove();
        };
      }, {
        flush: 'post',
        immediate: true
      });
      (0, _vue.watch)([lastWheelZoomDirection], function () {
        var wheelDirection = lastWheelZoomDirection.value.wheelDirection;
        if (wheelDirection > 0) {
          onZoomOut();
        } else if (wheelDirection < 0) {
          onZoomIn();
        }
      });
    });
    (0, _vue.onUnmounted)(function () {
      removeListeners();
    });
    return function () {
      var visible = props.visible,
        prefixCls = props.prefixCls,
        rootClassName = props.rootClassName;
      return (0, _vue.createVNode)(_vcDialog.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), {}, {
        "transitionName": "zoom",
        "maskTransitionName": "fade",
        "closable": false,
        "maskClosable": false,
        "keyboard": true,
        "prefixCls": prefixCls,
        "onClose": onClose,
        "afterClose": onAfterClose,
        "visible": visible,
        "wrapClassName": wrapClassName,
        "rootClassName": rootClassName,
        "getContainer": props.getContainer
      }), {
        default: function _default() {
          return [(0, _vue.createVNode)("div", {
            "class": "".concat(props.prefixCls, "-close"),
            "onClick": onClose
          }, [(0, _vue.createVNode)(_CloseFilled.default, {
            "class": "".concat(props.prefixCls, "-close-icon")
          }, null)]), (0, _vue.createVNode)("div", {
            "class": "".concat(props.prefixCls, "-img-wrapper"),
            "style": {
              transform: "translate3d(".concat(position.x, "px, ").concat(position.y, "px, 0)")
            }
          }, [(0, _vue.createVNode)("img", {
            "onMousedown": onMouseDown,
            "onDblclick": onDoubleClick,
            "ref": imgRef,
            "class": "".concat(props.prefixCls, "-img"),
            "src": combinationSrc.value,
            "alt": props.alt,
            "style": {
              transform: "scale3d(".concat(scale.value, ", ").concat(scale.value, ", 1) rotate(").concat(rotate.value, "deg)")
            }
          }, null)]), (0, _vue.createVNode)(_PreviewOperations.default, {
            "prefixCls": props.prefixCls,
            "onScaleSelect": setScale,
            "onZoomIn": onZoomIn,
            "onZoomOut": onZoomOut,
            "onRotateRight": onRotateRight,
            "onRotateLeft": onRotateLeft,
            "onRotateSave": onRotateSave,
            "onSwitchLeft": handleSwitchLeft,
            "onSwitchRight": handleSwitchRight,
            "rotateSaveDisabled": rotateSaveDisabled.value,
            "isGroup": showLeftOrRightSwitches.value,
            "groupCount": previewGroupCount.value,
            "currentIndex": currentPreviewIndex.value
          }, null)];
        }
      });
    };
  }
});
var _default2 = Preview;
exports.default = _default2;