"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "ImagePreview", {
    enumerable: true,
    get: function() {
        return ImagePreview;
    }
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _taro = /*#__PURE__*/ _interop_require_default._(require("@tarojs/taro"));
var _components = require("@tarojs/components");
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _iconsreacttaro = require("@nutui/icons-react-taro");
var _index = /*#__PURE__*/ _interop_require_default._(require("../popup/index"));
var _index1 = /*#__PURE__*/ _interop_require_default._(require("../image/index"));
var _index2 = /*#__PURE__*/ _interop_require_default._(require("../swiper/index"));
var _index3 = /*#__PURE__*/ _interop_require_default._(require("../swiperitem/index"));
var _typings = require("../../utils/typings");
var _usepropsvalue = require("../../hooks/use-props-value");
var _utils = require("../../utils");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.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 onChange() {},
    onClose: function onClose() {}
});
var ImagePreview = function ImagePreview(props) {
    var _mergeProps = (0, _utils.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 = (0, _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 = (0, _react.useRef)(null);
    var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
        value: value,
        defaultValue: defaultValue,
        finalValue: defaultValue,
        onChange: onChange
    }), 2), innerNo = _usePropsValue[0], setInnerNo = _usePropsValue[1];
    var _useState = (0, _sliced_to_array._)((0, _react.useState)(visible), 2), showPop = _useState[0], setShowPop = _useState[1];
    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), active = _useState1[0], setActive = _useState1[1];
    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(images.length + videos.length), 2), maxNo = _useState2[0], setMaxNo = _useState2[1];
    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)({
        scale: 1,
        moveable: false,
        oriDistance: 0,
        originScale: 1
    }), 2), store = _useState3[0], setStore = _useState3[1];
    var lastTouchEndTime = (0, _react.useRef)(0) // 用来辅助监听双击
    ;
    var onTouchStart = function onTouchStart(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 onTouchMove(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 onTouchEnd() {
        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();
        }
    };
    (0, _react.useEffect)(function() {
        init();
    }, []);
    var init = function init() {
        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);
        };
    };
    (0, _react.useEffect)(function() {
        setShowPop(visible);
    }, [
        visible
    ]);
    (0, _react.useEffect)(function() {
        setInnerNo(defaultValue || 1);
    }, [
        defaultValue
    ]);
    (0, _react.useEffect)(function() {
        setActive(innerNo);
    }, [
        innerNo
    ]);
    (0, _react.useEffect)(function() {
        setMaxNo(images.length + videos.length);
    }, [
        images,
        videos
    ]);
    var scaleNow = function scaleNow() {
        if (ref.current) {
            ref.current.style.transform = "scale(".concat(store.scale, ")");
        }
    };
    var getDistance = function getDistance(first, second) {
        return Math.hypot(Math.abs(second.pageX - first.pageX), Math.abs(second.pageY - first.pageY));
    };
    var slideChangeEnd = function slideChangeEnd(page) {
        setActive(page + 1);
        onChange === null || onChange === void 0 ? void 0 : onChange(page + 1);
    };
    var onCloseInner = function onCloseInner(e) {
        e.stopPropagation();
        setShowPop(false);
        setActive(innerNo);
        scaleNow();
        onClose === null || onClose === void 0 ? void 0 : onClose();
        setStore((0, _object_spread_props._)((0, _object_spread._)({}, store), {
            scale: 1
        }));
    };
    var closeOnImg = function closeOnImg(e) {
        e.stopPropagation();
        // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
        if (closeOnContentClick) onCloseInner(e);
    };
    return /*#__PURE__*/ _react.default.createElement(_index.default, {
        visible: showPop,
        className: "".concat(classPrefix, "-pop"),
        onClick: onCloseInner
    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: (0, _classnames.default)(classPrefix, className),
        style: style,
        ref: ref,
        onTouchStart: onTouchStart,
        onTouchMove: onTouchMove,
        onTouchEnd: onTouchEnd,
        onTouchCancel: onTouchEnd
    }, /*#__PURE__*/ _react.default.createElement(_index2.default, {
        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 onChange(e) {
            return slideChangeEnd(e.detail.current);
        },
        defaultValue: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
        indicator: indicator
    }, (0, _to_consumable_array._)(videos.map(function(item) {
        return {
            type: 'video',
            data: item
        };
    })).concat((0, _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.default.createElement(_index3.default, {
            key: index,
            className: "nut-imagepreview-swiper-item"
        }, item.type === 'video' ? /*#__PURE__*/ _react.default.createElement(_components.Video, {
            src: item.data.source.src,
            onClick: closeOnImg,
            controls: item.data.options.controls,
            autoplay: false,
            loop: false,
            muted: item.data.options.muted
        }) : /*#__PURE__*/ _react.default.createElement(_index1.default, (0, _object_spread._)({
            src: item.data.src,
            mode: "widthFix",
            onClick: closeOnImg,
            style: {
                width: '100%'
            }
        }, _taro.default.getEnv() !== 'WEB' && {
            showMenuByLongpress: showMenuByLongpress
        })));
    }))), pagination && /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: "".concat(classPrefix, "-index")
    }, active, "/", maxNo), closeIcon !== false && /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: "".concat(classPrefix, "-close ").concat(closeIconPosition),
        onClick: onCloseInner
    }, closeIcon === true ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, null) : closeIcon));
};
ImagePreview.displayName = 'NutImagePreview';
