import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useState, useEffect, useRef, useImperativeHandle } from "react";
import { useTouch } from "../../hooks/use-touch";
import { passiveSupported } from "../../utils/supports-passive";
var InternalPickerPanel = function(props, ref) {
    var _props_keyIndex = props.keyIndex, keyIndex = _props_keyIndex === void 0 ? 0 : _props_keyIndex, defaultValue = props.defaultValue, _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, _props_threeDimensional = props.threeDimensional, threeDimensional = _props_threeDimensional === void 0 ? true : _props_threeDimensional, _props_duration = props.duration, duration = _props_duration === void 0 ? 1000 : _props_duration, chooseItem = props.chooseItem;
    var touch = useTouch();
    var DEFAULT_DURATION = 200;
    // 触发惯性滑动条件:
    // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_TIME` 且 move
    // 距离大于 `MOMENTUM_DISTANCE` 时，执行惯性滑动
    var INERTIA_TIME = 300;
    var INERTIA_DISTANCE = 15;
    var _useState = _sliced_to_array(useState(1), 2), currIndex = _useState[0], setCurrIndex = _useState[1];
    var lineSpacing = 36;
    var _useState1 = _sliced_to_array(useState(0), 2), touchTime = _useState1[0], setTouchTime = _useState1[1];
    var _useState2 = _sliced_to_array(useState('0deg'), 2), touchDeg = _useState2[0], setTouchDeg = _useState2[1];
    var rotation = 20;
    var moving = useRef(false);
    var timer;
    var rollerRef = useRef(null);
    var PickerPanelRef = useRef(null);
    var _useState3 = _sliced_to_array(useState(0), 2), startTime = _useState3[0], setStartTime = _useState3[1];
    var _useState4 = _sliced_to_array(useState(0), 2), startY = _useState4[0], setStartY = _useState4[1];
    var transformY = useRef(0);
    var _useState5 = _sliced_to_array(useState(0), 2), scrollDistance = _useState5[0], setScrollDistance = _useState5[1];
    var isHidden = function(index) {
        if (index >= currIndex + 8 || index <= currIndex - 8) {
            return true;
        }
        return false;
    };
    var setTransform = function(type, deg) {
        var time = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : DEFAULT_DURATION, translateY = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 0;
        var nTime = time;
        if (type !== 'end') {
            nTime = 0;
        }
        setTouchTime(nTime);
        setTouchDeg(deg);
        setScrollDistance(translateY);
    };
    var setMove = function(move, type, time) {
        var updateMove = move + transformY.current;
        if (type === 'end') {
            // 限定滚动距离
            if (updateMove > 0) {
                updateMove = 0;
            }
            if (updateMove < -(options.length - 1) * lineSpacing) {
                updateMove = -(options.length - 1) * lineSpacing;
            }
            // 设置滚动距离为lineSpacing的倍数值
            var endMove = Math.round(updateMove / lineSpacing) * lineSpacing;
            var deg = "".concat((Math.abs(Math.round(endMove / lineSpacing)) + 1) * rotation, "deg");
            setTransform(type, deg, time, endMove);
            setCurrIndex(Math.abs(Math.round(endMove / lineSpacing)) + 1);
        } else {
            var deg1 = 0;
            var currentDeg = (-updateMove / lineSpacing + 1) * rotation;
            // picker 滚动的最大角度
            var maxDeg = (options.length + 1) * rotation;
            var minDeg = 0;
            deg1 = Math.min(Math.max(currentDeg, minDeg), maxDeg);
            if (minDeg < deg1 && deg1 < maxDeg) {
                setTransform('', "".concat(deg1, "deg"), undefined, updateMove);
                setCurrIndex(Math.abs(Math.round(updateMove / lineSpacing)) + 1);
            }
        }
    };
    var setChooseValue = function(move) {
        chooseItem === null || chooseItem === void 0 ? void 0 : chooseItem(options === null || options === void 0 ? void 0 : options[Math.round(-move / lineSpacing)], keyIndex);
    };
    // 开始滚动
    var touchStart = function(event) {
        touch.start(event);
        setStartY(touch.deltaY.current);
        setStartTime(Date.now());
        transformY.current = scrollDistance;
    };
    var touchMove = function(event) {
        touch.move(event);
        if (touch.isVertical) {
            moving.current = true;
            preventDefault(event, true);
        }
        var move = touch.deltaY.current - startY;
        setMove(move);
    };
    var touchEnd = function() {
        if (!moving.current) return;
        var move = touch.deltaY.current - startY;
        var moveTime = Date.now() - startTime;
        // 区分是否为惯性滚动
        if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
            // 惯性滚动
            var distance = momentum(move, moveTime);
            setMove(distance, 'end', +duration);
        } else {
            setMove(move, 'end');
        }
        setTimeout(function() {
            touch.reset();
        }, 0);
    };
    // 惯性滚动 距离
    var momentum = function(distance, duration) {
        var nDistance = distance;
        // 惯性滚动的速度
        var speed = Math.abs(nDistance / duration);
        // 惯性滚动的距离
        nDistance = speed / 0.003 * (nDistance < 0 ? -1 : 1);
        return nDistance;
    };
    var modifyStatus = function(type, val) {
        var value = val || defaultValue;
        var index = -1;
        if (value) {
            options.some(function(item, idx) {
                if (item.value === value) {
                    index = idx;
                    return true;
                }
                return false;
            });
        } else {
            options.forEach(function(item, i) {
                if (item.value === defaultValue) {
                    index = i;
                }
            });
        }
        setCurrIndex(index === -1 ? 1 : index + 1);
        var move = index === -1 ? 0 : index * lineSpacing;
        type && setChooseValue(-move);
        setMove(-move);
    };
    // 惯性滚动结束
    var stopMomentum = function() {
        moving.current = false;
        setTouchTime(0);
        setChooseValue(scrollDistance);
    };
    // 阻止默认事件
    var preventDefault = function(event, isStopPropagation) {
        /* istanbul ignore else */ if (typeof event.cancelable !== 'boolean' || event.cancelable) {
            event.preventDefault();
        }
        if (isStopPropagation) {
            event.stopPropagation();
        }
    };
    var touchRollerStyle = function() {
        return {
            transition: "transform ".concat(touchTime, "ms cubic-bezier(0.17, 0.89, 0.45, 1)"),
            transform: "rotate3d(1, 0, 0, ".concat(touchDeg, ")")
        };
    };
    var touchTileStyle = function() {
        return {
            transition: "transform ".concat(touchTime, "ms cubic-bezier(0.17, 0.89, 0.45, 1)"),
            transform: "translate3d(0, ".concat(scrollDistance, "px, 0)")
        };
    };
    useEffect(function() {
        setScrollDistance(0);
        transformY.current = 0;
        modifyStatus(false);
        return function() {
            clearTimeout(timer);
        };
    }, [
        options
    ]);
    useImperativeHandle(ref, function() {
        return {
            stopMomentum: stopMomentum,
            moving: moving.current
        };
    });
    useEffect(function() {
        var _PickerPanelRef_current, _PickerPanelRef_current1, _PickerPanelRef_current2;
        var options = passiveSupported ? {
            passive: false
        } : false;
        (_PickerPanelRef_current = PickerPanelRef.current) === null || _PickerPanelRef_current === void 0 ? void 0 : _PickerPanelRef_current.addEventListener('touchstart', touchStart, options);
        (_PickerPanelRef_current1 = PickerPanelRef.current) === null || _PickerPanelRef_current1 === void 0 ? void 0 : _PickerPanelRef_current1.addEventListener('touchmove', touchMove, options);
        (_PickerPanelRef_current2 = PickerPanelRef.current) === null || _PickerPanelRef_current2 === void 0 ? void 0 : _PickerPanelRef_current2.addEventListener('touchend', touchEnd, options);
        return function() {
            var _PickerPanelRef_current, _PickerPanelRef_current1, _PickerPanelRef_current2;
            (_PickerPanelRef_current = PickerPanelRef.current) === null || _PickerPanelRef_current === void 0 ? void 0 : _PickerPanelRef_current.removeEventListener('touchstart', touchStart);
            (_PickerPanelRef_current1 = PickerPanelRef.current) === null || _PickerPanelRef_current1 === void 0 ? void 0 : _PickerPanelRef_current1.removeEventListener('touchmove', touchMove);
            (_PickerPanelRef_current2 = PickerPanelRef.current) === null || _PickerPanelRef_current2 === void 0 ? void 0 : _PickerPanelRef_current2.removeEventListener('touchend', touchEnd);
        };
    });
    return /*#__PURE__*/ React.createElement("div", {
        className: "nut-picker-list",
        ref: PickerPanelRef,
        onTouchStart: touchStart,
        onTouchMove: touchMove,
        onTouchEnd: touchEnd
    }, /*#__PURE__*/ React.createElement("div", {
        className: "nut-picker-roller",
        ref: rollerRef,
        style: threeDimensional ? touchRollerStyle() : touchTileStyle(),
        onTransitionEnd: stopMomentum
    }, threeDimensional && options.map(function(item, index) {
        return /*#__PURE__*/ React.createElement("div", {
            className: "nut-picker-roller-item ".concat(isHidden(index + 1) && 'nut-picker-roller-item-hidden'),
            style: {
                transform: "rotate3d(1, 0, 0, ".concat(-rotation * (index + 1), "deg) translate3d(0px, 0px, 104px)")
            },
            key: item.value ? item.value : index
        }, /*#__PURE__*/ React.createElement(React.Fragment, null, item.text));
    }), !threeDimensional && options.map(function(item, index) {
        return /*#__PURE__*/ React.createElement("div", {
            className: "nut-picker-roller-item-title",
            key: item.value ? item.value : index
        }, /*#__PURE__*/ React.createElement(React.Fragment, null, item.text));
    })), /*#__PURE__*/ React.createElement("div", {
        className: "nut-picker-mask"
    }), /*#__PURE__*/ React.createElement("div", {
        className: "nut-picker-indicator"
    }));
};
var PickerPanel = /*#__PURE__*/ React.forwardRef(InternalPickerPanel);
export default PickerPanel;
