import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import classNames from 'classnames';
import { RcDialog } from '../components';
import { ConfigContext } from '../config-provider/context';
import addEventListener from '../components/rc-util/Dom/addEventListener';
import Icon from '../icon';
var CloseFill = Icon.CloseFill,
    LeftFill = Icon.LeftFill,
    RightFill = Icon.RightFill,
    ZoomInLine = Icon.ZoomInLine,
    ZoomOutLine = Icon.ZoomOutLine,
    FullScreenLine = Icon.FullScreenLine,
    ExitFullScreenLine = Icon.ExitFullScreenLine,
    RotateLeftOutlinedLine = Icon.RotateLeftOutlinedLine,
    RotateRightOutlinedLine = Icon.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 = _objectWithoutProperties(props, ["children", "prefixCls", "closeIcon", "images", "curIndex", "functions", "visible"]);

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

  var _React$useContext = React.useContext(ConfigContext),
      getPrefixClassName = _React$useContext.getPrefixClassName;

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

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

  var _React$useState3 = React.useState(0),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      rotate = _React$useState4[0],
      setRotate = _React$useState4[1];

  var _React$useState5 = React.useState(1),
      _React$useState6 = _slicedToArray(_React$useState5, 2),
      zoom = _React$useState6[0],
      setZoom = _React$useState6[1];

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

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

  var _React$useState11 = React.useState({
    x: 0,
    y: 0
  }),
      _React$useState12 = _slicedToArray(_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.useEffect(function () {
    setIndex(curIndex + 1);
  }, [curIndex]);
  React.useEffect(function () {
    var mouseMoveListener = addEventListener(window, 'mousemove', onMouseMove, false);
    var mouseUpListener = addEventListener(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.createElement("div", {
        onClick: function onClick() {
          return onImageOperation(itemIndex);
        }
      }, element);
    };

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

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

    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(previewPrefixCls, "-info")
    }, /*#__PURE__*/React.createElement("div", {
      className: classNames("".concat(previewPrefixCls, "-info-img"), (_classNames = {}, _defineProperty(_classNames, "".concat(previewPrefixCls, "-info-img-fullScreen"), fullScreen), _defineProperty(_classNames, "".concat(previewPrefixCls, "-info-img-moving"), moving), _classNames)),
      style: {
        transform: "translate3d(".concat(position.x, "px, ").concat(position.y, "px, 0)")
      }
    }, /*#__PURE__*/React.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.createElement("span", {
      className: classNames("".concat(previewPrefixCls, "-info-index"), _defineProperty({}, "".concat(previewPrefixCls, "-info-indexTop"), functions))
    }, index, "/", images === null || images === void 0 ? void 0 : images.length), functions ? /*#__PURE__*/React.createElement("div", {
      className: "".concat(previewPrefixCls, "-info-functions")
    }, __FUNCICONS__.map(function (element, eleIndex) {
      return /*#__PURE__*/React.createElement("div", {
        key: eleIndex
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(previewPrefixCls, "-info-function")
      }, element));
    })) : null, index !== 1 && /*#__PURE__*/React.createElement("button", {
      type: "button",
      className: "".concat(previewPrefixCls, "-info-prev"),
      onClick: onPrevClick
    }, /*#__PURE__*/React.createElement(LeftFill, null)), index !== (images === null || images === void 0 ? void 0 : images.length) && /*#__PURE__*/React.createElement("button", {
      type: "button",
      className: "".concat(previewPrefixCls, "-info-next"),
      onClick: onNextClick
    }, /*#__PURE__*/React.createElement(RightFill, null)));
  };

  var renderPreviewModal = function renderPreviewModal() {
    var defaultIcon = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CloseFill, null));
    return /*#__PURE__*/React.createElement(RcDialog, Object.assign({
      closeIcon: customCloseIcon || defaultIcon,
      prefixCls: previewPrefixCls,
      visible: visible
    }, reset), renderModalContent());
  };

  return renderPreviewModal();
};

export default Preview;