function _extends() {
  _extends = Object.assign ? Object.assign.bind() : function(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
    return target;
  };
  return _extends.apply(this, arguments);
}
import React, { useContext } from "react";
import classnames from "classnames";
import { useGesture } from "@use-gesture/react";
import { useSpring, animated } from "@react-spring/web";
import Image from "../image";
import ConfigProviderContext from "../config-provider/ConfigProviderContext";
const ImagePreviewItem = (props) => {
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace("image-preview", prefixCls);
  const [{
    zoom,
    x,
    y
  }, api] = useSpring(() => ({
    zoom: 1,
    x: 0,
    y: 0,
    config: {
      tension: 300
    }
  }));
  const bind = useGesture({
    onDrag: (state) => {
      if (state.tap && state.elapsedTime > 0) {
        props.onTap();
        return;
      }
      const [swipeX, swipeY] = state.swipe;
      const currentZoom = zoom.get();
      if (currentZoom <= 1 || swipeX !== 0 || swipeY !== 0) {
        api.start({
          x: 0,
          y: 0,
          immediate: true
        });
      } else {
        const [offsetX, offsetY] = state.offset;
        api.start({
          x: offsetX,
          y: offsetY,
          immediate: true
        });
      }
    },
    onPinch: (state) => {
      var _a;
      const [offsetX] = state.offset;
      const currentZoom = state.last ? Math.max(Math.min(offsetX, props.maxZoom), 1) : offsetX;
      api.start({
        zoom: currentZoom,
        immediate: !state.last
      });
      (_a = props.onZoomChange) == null ? void 0 : _a.call(props, currentZoom);
      if (state.last && currentZoom <= 1) {
        api.start({
          x: 0,
          y: 0,
          immediate: true
        });
      }
    }
  }, {
    drag: {
      from: () => [x.get(), y.get()]
    },
    pinch: {
      distanceBounds: {
        min: 1,
        max: props.maxZoom
      },
      rubberband: true,
      from: () => [zoom.get(), 0]
    }
  });
  return /* @__PURE__ */ React.createElement("div", {
    className: classnames(bem("slide")),
    "data-testid": "slide",
    onPointerMove: (e) => {
      if (zoom.get() !== 1) {
        e.stopPropagation();
      }
    }
  }, /* @__PURE__ */ React.createElement("div", _extends({
    className: classnames(bem("control"))
  }, bind(), {
    "data-testid": "control"
  }), /* @__PURE__ */ React.createElement(animated.div, {
    className: classnames(bem("image-wrapper")),
    style: {
      scale: zoom,
      x,
      y
    }
  }, /* @__PURE__ */ React.createElement(Image, {
    fit: "contain",
    src: props.image,
    className: classnames(bem("image")),
    onClick: () => {
      var _a;
      (_a = props.onTap) == null ? void 0 : _a.call(props);
    }
  }))));
};
var stdin_default = ImagePreviewItem;
export {
  stdin_default as default
};
