import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
import React, { useEffect, useRef, useState } from "react";
import Taro from "@tarojs/taro";
import { Video as TaroVideo, View } from "@tarojs/components";
import classNames from "classnames";
import { Close } from "@nutui/icons-react-taro";
import Popup from "../popup/index";
import Image from "../image/index";
import Swiper from "../swiper/index";
import SwiperItem from "../swiperitem/index";
import { ComponentDefaults } from "../../utils/typings";
import { usePropsValue } from "../../hooks/use-props-value";
import { mergeProps } from "../../utils";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    images: [],
    videos: [],
    visible: false,
    autoPlay: false,
    defaultValue: 1,
    closeOnContentClick: false,
    pagination: true,
    indicator: false,
    indicatorColor: '#fff',
    closeIcon: false,
    closeIconPosition: 'top-right',
    showMenuByLongpress: false,
    onChange: function() {},
    onClose: function() {}
});
export var ImagePreview = function(props) {
    var _mergeProps = mergeProps(defaultProps, props), value = _mergeProps.value, className = _mergeProps.className, style = _mergeProps.style, images = _mergeProps.images, videos = _mergeProps.videos, visible = _mergeProps.visible, defaultValue = _mergeProps.defaultValue, indicatorColor = _mergeProps.indicatorColor, pagination = _mergeProps.pagination, indicator = _mergeProps.indicator, autoPlay = _mergeProps.autoPlay, loop = _mergeProps.loop, closeOnContentClick = _mergeProps.closeOnContentClick, closeIcon = _mergeProps.closeIcon, closeIconPosition = _mergeProps.closeIconPosition, showMenuByLongpress = _mergeProps.showMenuByLongpress, onClose = _mergeProps.onClose, onChange = _mergeProps.onChange, rest = _object_without_properties(_mergeProps, [
        "value",
        "className",
        "style",
        "images",
        "videos",
        "visible",
        "defaultValue",
        "indicatorColor",
        "pagination",
        "indicator",
        "autoPlay",
        "loop",
        "closeOnContentClick",
        "closeIcon",
        "closeIconPosition",
        "showMenuByLongpress",
        "onClose",
        "onChange"
    ]);
    var classPrefix = 'nut-imagepreview';
    var ref = useRef(null);
    var _usePropsValue = _sliced_to_array(usePropsValue({
        value: value,
        defaultValue: defaultValue,
        finalValue: defaultValue,
        onChange: onChange
    }), 2), innerNo = _usePropsValue[0], setInnerNo = _usePropsValue[1];
    var _useState = _sliced_to_array(useState(visible), 2), showPop = _useState[0], setShowPop = _useState[1];
    var _useState1 = _sliced_to_array(useState(0), 2), active = _useState1[0], setActive = _useState1[1];
    var _useState2 = _sliced_to_array(useState(images.length + videos.length), 2), maxNo = _useState2[0], setMaxNo = _useState2[1];
    var _useState3 = _sliced_to_array(useState({
        scale: 1,
        moveable: false,
        oriDistance: 0,
        originScale: 1
    }), 2), store = _useState3[0], setStore = _useState3[1];
    var lastTouchEndTime = useRef(0) // 用来辅助监听双击
    ;
    var onTouchStart = function(event) {
        var touches = event.touches;
        var events = touches[0];
        var events2 = touches[1];
        // 如果已经放大，双击应变回原尺寸；如果是原尺寸，双击应放大
        var curTouchTime = Date.now();
        if (curTouchTime - lastTouchEndTime.current < 100) {
            var store1 = store;
            store1.scale = store1.scale === 1 ? 2 : 1;
            scaleNow();
        }
        var store11 = store;
        store11.moveable = true;
        if (events2) {
            // 如果开始两指操作，记录初始时刻两指间的距离
            store11.oriDistance = getDistance(events, events2);
        }
        // 取到开始两指操作时的放大（缩小比例），store.scale 存储的是当前的放缩比（相对于标准大小 scale 为 1 的情况的放大缩小比）
        store11.originScale = store11.scale;
    };
    var onTouchMove = function(event) {
        if (!store.moveable) return;
        var touches = event.touches;
        var events = touches[0];
        var events2 = touches[1];
        var store1 = store;
        // 双指移动
        if (events2) {
            var curDistance = getDistance(events, events2);
            /** 此处计算倍数，距离放大（缩小） k 倍则 scale 也 扩大（缩小） k 倍。距离放大（缩小）倍数 = 结束时两点距离 除以 开始时两点距离
       * 注意此处的 scale 变化是基于 store.scale 的。
       * store.scale 是一个暂存值，比如第一次放大 2 倍，则 store.scale 为 2。
       * 再次两指触碰的时候，store.originScale 就为 store.scale 的值，基于此时的 store.scale 继续放大缩小。 * */ var curScale = curDistance / store1.oriDistance;
            // 最大放大 3 倍，缩小后松手要弹回原比例
            store1.scale = Math.min(store1.originScale * curScale, 3);
            scaleNow();
        }
    };
    var onTouchEnd = function() {
        lastTouchEndTime.current = Date.now();
        var store1 = store;
        store1.moveable = false;
        if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {
            store1.scale = 1;
            scaleNow();
        }
    };
    useEffect(function() {
        init();
    }, []);
    var init = function() {
        document.addEventListener('touchmove', onTouchMove);
        document.addEventListener('touchend', onTouchEnd);
        document.addEventListener('touchcancel', onTouchEnd);
        return function() {
            document.removeEventListener('touchcancel', onTouchEnd);
            document.removeEventListener('touchmove', onTouchMove);
            document.removeEventListener('touchend', onTouchEnd);
        };
    };
    useEffect(function() {
        setShowPop(visible);
    }, [
        visible
    ]);
    useEffect(function() {
        setInnerNo(defaultValue || 1);
    }, [
        defaultValue
    ]);
    useEffect(function() {
        setActive(innerNo);
    }, [
        innerNo
    ]);
    useEffect(function() {
        setMaxNo(images.length + videos.length);
    }, [
        images,
        videos
    ]);
    var scaleNow = function() {
        if (ref.current) {
            ref.current.style.transform = "scale(".concat(store.scale, ")");
        }
    };
    var getDistance = function(first, second) {
        return Math.hypot(Math.abs(second.pageX - first.pageX), Math.abs(second.pageY - first.pageY));
    };
    var slideChangeEnd = function(page) {
        setActive(page + 1);
        onChange === null || onChange === void 0 ? void 0 : onChange(page + 1);
    };
    var onCloseInner = function(e) {
        e.stopPropagation();
        setShowPop(false);
        setActive(innerNo);
        scaleNow();
        onClose === null || onClose === void 0 ? void 0 : onClose();
        setStore(_object_spread_props(_object_spread({}, store), {
            scale: 1
        }));
    };
    var closeOnImg = function(e) {
        e.stopPropagation();
        // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
        if (closeOnContentClick) onCloseInner(e);
    };
    return /*#__PURE__*/ React.createElement(Popup, {
        visible: showPop,
        className: "".concat(classPrefix, "-pop"),
        onClick: onCloseInner
    }, /*#__PURE__*/ React.createElement(View, {
        className: classNames(classPrefix, className),
        style: style,
        ref: ref,
        onTouchStart: onTouchStart,
        onTouchMove: onTouchMove,
        onTouchEnd: onTouchEnd,
        onTouchCancel: onTouchEnd
    }, /*#__PURE__*/ React.createElement(Swiper, {
        autoplay: autoPlay,
        loop: loop,
        direction: "horizontal",
        className: "".concat(classPrefix, "-swiper"),
        height: "100%",
        style: {
            display: showPop ? 'block' : 'none',
            '--nutui-indicator-color': indicatorColor,
            width: '100%',
            height: '100%'
        },
        onChange: function(e) {
            return slideChangeEnd(e.detail.current);
        },
        defaultValue: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
        indicator: indicator
    }, _to_consumable_array(videos.map(function(item) {
        return {
            type: 'video',
            data: item
        };
    })).concat(_to_consumable_array(images.map(function(item) {
        return {
            type: 'image',
            data: item
        };
    }))).sort(function(a, b) {
        var _a_data, _b_data;
        var _a_data_index, _b_data_index;
        return ((_a_data_index = (_a_data = a.data) === null || _a_data === void 0 ? void 0 : _a_data.index) !== null && _a_data_index !== void 0 ? _a_data_index : 0) - ((_b_data_index = (_b_data = b.data) === null || _b_data === void 0 ? void 0 : _b_data.index) !== null && _b_data_index !== void 0 ? _b_data_index : 0);
    }).map(function(item, index) {
        return /*#__PURE__*/ React.createElement(SwiperItem, {
            key: index,
            className: "nut-imagepreview-swiper-item"
        }, item.type === 'video' ? /*#__PURE__*/ React.createElement(TaroVideo, {
            src: item.data.source.src,
            onClick: closeOnImg,
            controls: item.data.options.controls,
            autoplay: false,
            loop: false,
            muted: item.data.options.muted
        }) : /*#__PURE__*/ React.createElement(Image, _object_spread({
            src: item.data.src,
            mode: "widthFix",
            onClick: closeOnImg,
            style: {
                width: '100%'
            }
        }, Taro.getEnv() !== 'WEB' && {
            showMenuByLongpress: showMenuByLongpress
        })));
    }))), pagination && /*#__PURE__*/ React.createElement(View, {
        className: "".concat(classPrefix, "-index")
    }, active, "/", maxNo), closeIcon !== false && /*#__PURE__*/ React.createElement(View, {
        className: "".concat(classPrefix, "-close ").concat(closeIconPosition),
        onClick: onCloseInner
    }, closeIcon === true ? /*#__PURE__*/ React.createElement(Close, null) : closeIcon));
};
ImagePreview.displayName = 'NutImagePreview';
