"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const useExpose = require("../composables/use-expose.js");
const useTouch = require("../composables/use-touch.js");
const index_esm = require("../../../@vant/use/dist/index.esm.js");
const index$1 = require("../image/index.js");
const index$2 = require("../loading/index.js");
const index = require("../swipe-item/index.js");
const constant = require("../utils/constant.js");
const props = require("../utils/props.js");
const create = require("../utils/create.js");
const dom = require("../utils/dom.js");
const format = require("../utils/format.js");
const getDistance = (touches) => Math.sqrt((touches[0].clientX - touches[1].clientX) ** 2 + (touches[0].clientY - touches[1].clientY) ** 2);
const getCenter = (touches) => ({
  x: (touches[0].clientX + touches[1].clientX) / 2,
  y: (touches[0].clientY + touches[1].clientY) / 2
});
const bem = create.createNamespace("image-preview")[1];
const longImageRatio = 2.6;
const imagePreviewItemProps = {
  src: String,
  show: Boolean,
  active: Number,
  minZoom: props.makeRequiredProp(props.numericProp),
  maxZoom: props.makeRequiredProp(props.numericProp),
  rootWidth: props.makeRequiredProp(Number),
  rootHeight: props.makeRequiredProp(Number),
  disableZoom: Boolean,
  doubleScale: Boolean,
  closeOnClickImage: Boolean,
  closeOnClickOverlay: Boolean,
  vertical: Boolean
};
var stdin_default = Vue.defineComponent({
  props: imagePreviewItemProps,
  emits: ["scale", "close", "longPress"],
  setup(props2, {
    emit,
    slots
  }) {
    const state = Vue.reactive({
      scale: 1,
      moveX: 0,
      moveY: 0,
      moving: false,
      zooming: false,
      initializing: false,
      imageRatio: 0
    });
    const touch = useTouch.useTouch();
    const imageRef = Vue.ref();
    const swipeItem = Vue.ref();
    const vertical = Vue.ref(false);
    const isLongImage = Vue.ref(false);
    let initialMoveY = 0;
    const imageStyle = Vue.computed(() => {
      const {
        scale,
        moveX,
        moveY,
        moving,
        zooming,
        initializing
      } = state;
      const style = {
        transitionDuration: zooming || moving || initializing ? "0s" : ".3s"
      };
      if (scale !== 1 || isLongImage.value) {
        style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`;
      }
      return style;
    });
    const maxMoveX = Vue.computed(() => {
      if (state.imageRatio) {
        const {
          rootWidth,
          rootHeight
        } = props2;
        const displayWidth = vertical.value ? rootHeight / state.imageRatio : rootWidth;
        return Math.max(0, (state.scale * displayWidth - rootWidth) / 2);
      }
      return 0;
    });
    const maxMoveY = Vue.computed(() => {
      if (state.imageRatio) {
        const {
          rootWidth,
          rootHeight
        } = props2;
        const displayHeight = vertical.value ? rootHeight : rootWidth * state.imageRatio;
        return Math.max(0, (state.scale * displayHeight - rootHeight) / 2);
      }
      return 0;
    });
    const setScale = (scale, center) => {
      var _a;
      scale = format.clamp(scale, +props2.minZoom, +props2.maxZoom + 1);
      if (scale !== state.scale) {
        const ratio = scale / state.scale;
        state.scale = scale;
        if (center) {
          const imageRect = index_esm.useRect((_a = imageRef.value) == null ? void 0 : _a.$el);
          const origin = {
            x: imageRect.width * 0.5,
            y: imageRect.height * 0.5
          };
          const moveX = state.moveX - (center.x - imageRect.left - origin.x) * (ratio - 1);
          const moveY = state.moveY - (center.y - imageRect.top - origin.y) * (ratio - 1);
          state.moveX = format.clamp(moveX, -maxMoveX.value, maxMoveX.value);
          state.moveY = format.clamp(moveY, -maxMoveY.value, maxMoveY.value);
        } else {
          state.moveX = 0;
          state.moveY = isLongImage.value ? initialMoveY : 0;
        }
        emit("scale", {
          scale,
          index: props2.active
        });
      }
    };
    const resetScale = () => {
      setScale(1);
    };
    const toggleScale = () => {
      const scale = state.scale > 1 ? 1 : 2;
      setScale(scale, scale === 2 || isLongImage.value ? {
        x: touch.startX.value,
        y: touch.startY.value
      } : void 0);
    };
    let fingerNum;
    let startMoveX;
    let startMoveY;
    let startScale;
    let startDistance;
    let lastCenter;
    let doubleTapTimer;
    let touchStartTime;
    let isImageMoved = false;
    const onTouchStart = (event) => {
      const {
        touches
      } = event;
      fingerNum = touches.length;
      if (fingerNum === 2 && props2.disableZoom) {
        return;
      }
      const {
        offsetX
      } = touch;
      touch.start(event);
      startMoveX = state.moveX;
      startMoveY = state.moveY;
      touchStartTime = Date.now();
      isImageMoved = false;
      state.moving = fingerNum === 1 && (state.scale !== 1 || isLongImage.value);
      state.zooming = fingerNum === 2 && !offsetX.value;
      if (state.zooming) {
        startScale = state.scale;
        startDistance = getDistance(touches);
      }
    };
    const onTouchMove = (event) => {
      const {
        touches
      } = event;
      touch.move(event);
      if (state.moving) {
        const {
          deltaX,
          deltaY
        } = touch;
        const moveX = deltaX.value + startMoveX;
        const moveY = deltaY.value + startMoveY;
        if ((props2.vertical ? touch.isVertical() && Math.abs(moveY) > maxMoveY.value : touch.isHorizontal() && Math.abs(moveX) > maxMoveX.value) && !isImageMoved) {
          state.moving = false;
          return;
        }
        isImageMoved = true;
        dom.preventDefault(event, true);
        state.moveX = format.clamp(moveX, -maxMoveX.value, maxMoveX.value);
        state.moveY = format.clamp(moveY, -maxMoveY.value, maxMoveY.value);
      }
      if (state.zooming) {
        dom.preventDefault(event, true);
        if (touches.length === 2) {
          const distance = getDistance(touches);
          const scale = startScale * distance / startDistance;
          lastCenter = getCenter(touches);
          setScale(scale, lastCenter);
        }
      }
    };
    const checkClose = (event) => {
      var _a;
      const swipeItemEl = (_a = swipeItem.value) == null ? void 0 : _a.$el;
      if (!swipeItemEl) return;
      const imageEl = swipeItemEl.firstElementChild;
      const isClickOverlay = event.target === swipeItemEl;
      const isClickImage = imageEl == null ? void 0 : imageEl.contains(event.target);
      if (!props2.closeOnClickImage && isClickImage) return;
      if (!props2.closeOnClickOverlay && isClickOverlay) return;
      emit("close");
    };
    const checkTap = (event) => {
      if (fingerNum > 1) {
        return;
      }
      const deltaTime = Date.now() - touchStartTime;
      const TAP_TIME = 250;
      if (touch.isTap.value) {
        if (deltaTime < TAP_TIME) {
          if (props2.doubleScale) {
            if (doubleTapTimer) {
              clearTimeout(doubleTapTimer);
              doubleTapTimer = null;
              toggleScale();
            } else {
              doubleTapTimer = setTimeout(() => {
                checkClose(event);
                doubleTapTimer = null;
              }, TAP_TIME);
            }
          } else {
            checkClose(event);
          }
        } else if (deltaTime > constant.LONG_PRESS_START_TIME) {
          emit("longPress");
        }
      }
    };
    const onTouchEnd = (event) => {
      let stopPropagation = false;
      if (state.moving || state.zooming) {
        stopPropagation = true;
        if (state.moving && startMoveX === state.moveX && startMoveY === state.moveY) {
          stopPropagation = false;
        }
        if (!event.touches.length) {
          if (state.zooming) {
            state.moveX = format.clamp(state.moveX, -maxMoveX.value, maxMoveX.value);
            state.moveY = format.clamp(state.moveY, -maxMoveY.value, maxMoveY.value);
            state.zooming = false;
          }
          state.moving = false;
          startMoveX = 0;
          startMoveY = 0;
          startScale = 1;
          if (state.scale < 1) {
            resetScale();
          }
          const maxZoom = +props2.maxZoom;
          if (state.scale > maxZoom) {
            setScale(maxZoom, lastCenter);
          }
        }
      }
      dom.preventDefault(event, stopPropagation);
      checkTap(event);
      touch.reset();
    };
    const resize = () => {
      const {
        rootWidth,
        rootHeight
      } = props2;
      const rootRatio = rootHeight / rootWidth;
      const {
        imageRatio
      } = state;
      vertical.value = state.imageRatio > rootRatio && imageRatio < longImageRatio;
      isLongImage.value = state.imageRatio > rootRatio && imageRatio >= longImageRatio;
      if (isLongImage.value) {
        initialMoveY = (imageRatio * rootWidth - rootHeight) / 2;
        state.moveY = initialMoveY;
        state.initializing = true;
        index_esm.raf(() => {
          state.initializing = false;
        });
      }
      resetScale();
    };
    const onLoad = (event) => {
      const {
        naturalWidth,
        naturalHeight
      } = event.target;
      state.imageRatio = naturalHeight / naturalWidth;
      resize();
    };
    Vue.watch(() => props2.active, resetScale);
    Vue.watch(() => props2.show, (value) => {
      if (!value) {
        resetScale();
      }
    });
    Vue.watch(() => [props2.rootWidth, props2.rootHeight], resize);
    index_esm.useEventListener("touchmove", onTouchMove, {
      target: Vue.computed(() => {
        var _a;
        return (_a = swipeItem.value) == null ? void 0 : _a.$el;
      })
    });
    useExpose.useExpose({
      resetScale
    });
    return () => {
      const imageSlots = {
        loading: () => Vue.createVNode(index$2.Loading, {
          "type": "spinner"
        }, null)
      };
      return Vue.createVNode(index.SwipeItem, {
        "ref": swipeItem,
        "class": bem("swipe-item"),
        "onTouchstartPassive": onTouchStart,
        "onTouchend": onTouchEnd,
        "onTouchcancel": onTouchEnd
      }, {
        default: () => [slots.image ? Vue.createVNode("div", {
          "class": bem("image-wrap")
        }, [slots.image({
          src: props2.src,
          onLoad,
          style: imageStyle.value
        })]) : Vue.createVNode(index$1.Image, {
          "ref": imageRef,
          "src": props2.src,
          "fit": "contain",
          "class": bem("image", {
            vertical: vertical.value
          }),
          "style": imageStyle.value,
          "onLoad": onLoad
        }, imageSlots)]
      });
    };
  }
});
exports.default = stdin_default;
