import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import throttle from 'lodash/throttle';
import isString from 'lodash/isString';
import ConfigContext from '../../../es/config-provider/ConfigContext';
import { Size } from '../../../es/_util/enum';
import Button from '../button/Button';
import { FuncType } from '../button/enum';
import Picture from './Picture';
import transform, { toTransformValue } from '../_util/transform';
import EventManager from '../_util/EventManager';
import { transformZoomData } from '../_util/DocumentUtils';
import Toolbar from './Toolbar';
import Navbar from './Navbar';
var scaleSteps = [0.05, 0.06, 0.07, 0.09, 0.11, 0.14, 0.17, 0.21, 0.26, 0.32, 0.39, 0.47, 0.5, 0.57, 0.69, 0.83, 0.92, 1, 1.2, 1.72, 2, 2.4, 2.88, 3.45, 4.14, 4.96, 5.95, 7.14, 8.56, 10];

function getPreviewItem(item) {
  if (isString(item)) {
    return {
      src: item
    };
  }

  return item;
}

var PictureViewer = function PictureViewer(props) {
  var list = props.list,
      _props$defaultIndex = props.defaultIndex,
      defaultIndex = _props$defaultIndex === void 0 ? 0 : _props$defaultIndex,
      prefixCls = props.prefixCls,
      modal = props.modal;

  var _useContext = useContext(ConfigContext),
      getProPrefixCls = _useContext.getProPrefixCls;

  var pictureRef = useRef(null);
  var transformTargetRef = useRef(null);

  var _useState = useState(defaultIndex),
      _useState2 = _slicedToArray(_useState, 2),
      index = _useState2[0],
      setIndex = _useState2[1];

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

  var _useState5 = useState([0, 0]),
      _useState6 = _slicedToArray(_useState5, 2),
      translate = _useState6[0],
      setTranslate = _useState6[1];

  var _useState7 = useState(),
      _useState8 = _slicedToArray(_useState7, 2),
      scale = _useState8[0],
      setScale = _useState8[1];

  var _useState9 = useState(false),
      _useState10 = _slicedToArray(_useState9, 2),
      isZoomMode = _useState10[0],
      setIsZoomMode = _useState10[1];

  var handleIndexChange = useCallback(function (newIndex) {
    if (isZoomMode) setIsZoomMode(false);

    if (newIndex < 0 || newIndex >= list.length) {
      return;
    }

    setIndex(newIndex);
    setTranslate([0, 0]);
    setRotate(0);
    setScale(undefined);
  }, [isZoomMode]);
  var getImageNaturalScale = useCallback(function () {
    var current = pictureRef.current;

    if (current) {
      var image = current.getImage();

      if (image) {
        var clientWidth = image.clientWidth,
            clientHeight = image.clientHeight,
            naturalHeight = image.naturalHeight,
            naturalWidth = image.naturalWidth;
        var imageScale = Math.min(clientWidth / naturalWidth, clientHeight / naturalHeight);
        return scaleSteps.findIndex(function (step, index, steps) {
          var nextStep = steps[index + 1];
          return step === imageScale || imageScale < step && index === 0 || step < imageScale && nextStep > imageScale || nextStep < imageScale && index === steps.length - 1;
        });
      }
    }

    return scaleSteps.indexOf(1);
  }, [pictureRef]);
  var getCurrentScale = useCallback(function () {
    if (scale !== undefined) {
      return scale;
    }

    return getImageNaturalScale();
  }, [getImageNaturalScale, scale]);
  var customizedPrefixCls = getProPrefixCls('picture-viewer', prefixCls);
  var handlePrev = useCallback(function () {
    return handleIndexChange(index - 1);
  }, [index, isZoomMode]);
  var handleNext = useCallback(function () {
    return handleIndexChange(index + 1);
  }, [index, isZoomMode]);
  var handleClose = useCallback(function () {
    return modal && modal.close();
  }, []);
  var handleRotateLeft = useCallback(function () {
    return setRotate((rotate - 90) % 360);
  }, [rotate]);
  var handleRotateRight = useCallback(function () {
    return setRotate((rotate + 90) % 360);
  }, [rotate]);
  var handleZoomIn = useCallback(function () {
    if (!isZoomMode) setIsZoomMode(true);
    var currentScale = getCurrentScale();

    if (currentScale < scaleSteps.length - 1) {
      setScale(getCurrentScale() + 1);
    }
  }, [getCurrentScale]);
  var handleZoomOut = useCallback(function () {
    if (!isZoomMode) setIsZoomMode(true);
    var currentScale = getCurrentScale();

    if (currentScale > 0) {
      setScale(currentScale - 1);
    }
  }, [getCurrentScale]);
  var throttleWheel = useMemo(function () {
    return throttle(function (callback) {
      return callback();
    }, 60);
  }, []);
  var handleWheel = useCallback(function (e) {
    if (e.deltaX > 0 || e.deltaY > 0) {
      throttleWheel(isZoomMode ? handleZoomOut : handleNext);
    } else {
      throttleWheel(isZoomMode ? handleZoomIn : handlePrev);
    }
  }, [handlePrev, handleNext, handleIndexChange, handleZoomOut, handleZoomIn, isZoomMode]);
  var translateEvent = useMemo(function () {
    return new EventManager();
  }, []);
  var executeTransform = useCallback(function (target, r, s, t) {
    var transformValue = toTransformValue({
      translate: "".concat(t[0], "px,").concat(t[1], "px"),
      rotate: r ? "".concat(r, "deg") : undefined,
      scale: s !== undefined && s > -1 ? scaleSteps[s] / scaleSteps[getImageNaturalScale()] : undefined
    });
    transform(transformValue, target.style);
  }, []);
  var handleMouseDown = useCallback(function (e) {
    var current = transformTargetRef.current;

    if (current) {
      var currentTarget = e.currentTarget;
      var pageX = transformZoomData(e.pageX);
      var pageY = transformZoomData(e.pageY);
      currentTarget.style.cursor = 'grabbing';

      var _translate = _slicedToArray(translate, 2),
          currentX = _translate[0],
          currentY = _translate[1];

      var startX = currentX - pageX;
      var startY = currentY - pageY;

      var handleMouseMove = function handleMouseMove(me) {
        currentX = startX + transformZoomData(me.pageX);
        currentY = startY + transformZoomData(me.pageY);
        executeTransform(current, rotate, scale, [currentX, currentY]);
      };

      var handleMouseUp = function handleMouseUp() {
        currentTarget.style.cursor = '';
        setTranslate([currentX, currentY]);
        translateEvent.removeEventListener('mousemove', handleMouseMove).removeEventListener('mouseup', handleMouseUp);
      };

      translateEvent.setTarget(document).addEventListener('mousemove', handleMouseMove).addEventListener('mouseup', handleMouseUp);
    }
  }, [translate, rotate, scale]);
  useEffect(function () {
    var current = transformTargetRef.current;

    if (current) {
      executeTransform(current, rotate, scale, translate);
    }
  }, [scale, rotate, translate]);
  useEffect(function () {
    return function () {
      translateEvent.clear();
    };
  }, []);
  var length = list.length;

  if (length) {
    var _getPreviewItem = getPreviewItem(list[index]),
        src = _getPreviewItem.src,
        downloadUrl = _getPreviewItem.downloadUrl;

    return /*#__PURE__*/React.createElement("div", {
      className: customizedPrefixCls,
      onWheel: handleWheel
    }, length > 1 && /*#__PURE__*/React.createElement(Button, {
      icon: "navigate_before",
      disabled: index === 0,
      funcType: FuncType.link,
      onClick: handlePrev,
      className: "".concat(customizedPrefixCls, "-btn ").concat(customizedPrefixCls, "-btn-nav"),
      size: Size.large
    }), /*#__PURE__*/React.createElement("div", {
      className: "".concat(customizedPrefixCls, "-picture"),
      onMouseDown: handleMouseDown
    }, /*#__PURE__*/React.createElement("div", {
      className: "".concat(customizedPrefixCls, "-picture-main"),
      ref: transformTargetRef
    }, /*#__PURE__*/React.createElement(Picture, {
      src: src,
      ref: pictureRef,
      objectFit: "scale-down",
      status: "loaded",
      preview: false,
      lazy: false,
      draggable: false
    })), /*#__PURE__*/React.createElement(Toolbar, {
      prefixCls: customizedPrefixCls,
      zoomInDisabled: scale === scaleSteps.length - 1,
      zoomOutDisabled: scale === 0,
      onZoomIn: handleZoomIn,
      onZoomOut: handleZoomOut,
      onRotateLeft: handleRotateLeft,
      onRotateRight: handleRotateRight,
      downloadUrl: downloadUrl
    }), length > 1 && /*#__PURE__*/React.createElement(Navbar, {
      prefixCls: customizedPrefixCls,
      value: index,
      onChange: handleIndexChange,
      list: list
    })), length > 1 && /*#__PURE__*/React.createElement(Button, {
      icon: "navigate_next",
      disabled: index === length - 1,
      funcType: FuncType.link,
      onClick: handleNext,
      className: "".concat(customizedPrefixCls, "-btn ").concat(customizedPrefixCls, "-btn-nav"),
      size: Size.large
    }), /*#__PURE__*/React.createElement(Button, {
      icon: "close",
      funcType: FuncType.link,
      onClick: handleClose,
      className: "".concat(customizedPrefixCls, "-btn ").concat(customizedPrefixCls, "-btn-close")
    }));
  }

  return null;
};

PictureViewer.displayName = 'PictureViewer';
export default PictureViewer;
//# sourceMappingURL=PictureViewer.js.map
