"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Range", {
    enumerable: true,
    get: function() {
        return Range;
    }
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _ts_generator = require("@swc/helpers/_/_ts_generator");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _components = require("@tarojs/components");
var _taro = require("@tarojs/taro");
var _pxtransform = require("../../utils/taro/px-transform");
var _usetouch = require("../../hooks/use-touch");
var _typings = require("../../utils/typings");
var _usepropsvalue = require("../../hooks/use-props-value");
var _getrect = require("../../utils/taro/get-rect");
var _index = require("../configprovider/index");
var _platform = require("../../utils/taro/platform");
var _mergeprops = require("../../utils/merge-props");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
    range: false,
    min: 0,
    max: 100,
    step: 1,
    vertical: false,
    marks: {}
});
var isHm = (0, _platform.harmony)();
var classPrefix = 'nut-range';
var verticalClassPrefix = "".concat(classPrefix, "-vertical");
var isSameValue = function isSameValue(newValue, oldValue) {
    return JSON.stringify(newValue) === JSON.stringify(oldValue);
};
var handleOverlap = function handleOverlap(value) {
    return value[0] > value[1] ? value.slice(0).reverse() : value;
};
var Range = function Range(props) {
    var rtl = (0, _index.useRtl)();
    var _mergeProps = (0, _mergeprops.mergeProps)(defaultProps, props), className = _mergeProps.className, style = _mergeProps.style, range = _mergeProps.range, disabled = _mergeProps.disabled, button = _mergeProps.button, vertical = _mergeProps.vertical, marks = _mergeProps.marks, minDescription = _mergeProps.minDescription, maxDescription = _mergeProps.maxDescription, currentDescription = _mergeProps.currentDescription, min = _mergeProps.min, max = _mergeProps.max, step = _mergeProps.step, value = _mergeProps.value, defaultValue = _mergeProps.defaultValue, onChange = _mergeProps.onChange, onStart = _mergeProps.onStart, onEnd = _mergeProps.onEnd;
    var rtlClassPrefix = (0, _react.useMemo)(function() {
        return "rtl-".concat(vertical ? verticalClassPrefix : classPrefix);
    }, [
        vertical
    ]);
    var buttonRef = (0, _react.useRef)(0);
    var dragStatusRef = (0, _react.useRef)('start');
    var touch = (0, _usetouch.useTouch)();
    var root = (0, _react.useRef)(null);
    var rootRect = (0, _react.useRef)(null);
    var _useState = (0, _sliced_to_array._)((0, _react.useState)([]), 2), marksList = _useState[0], setMarksList = _useState[1];
    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), startValue = _useState1[0], setStartValue = _useState1[1];
    var scope = (0, _react.useMemo)(function() {
        if (max < min || max === min) {
            console.log('max 的值需要大于 min的值');
        }
        return max - min;
    }, [
        max,
        min
    ]);
    var handleChange = function handleChange(value) {
        onChange && onChange(value);
    };
    var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
        value: value,
        defaultValue: defaultValue,
        finalValue: 0,
        onChange: handleChange
    }), 2), innerValue = _usePropsValue[0], setInnerValue = _usePropsValue[1];
    var exactValueRef = (0, _react.useRef)(value || defaultValue || 0);
    var marksRef = (0, _react.useRef)({});
    (0, _react.useEffect)(function() {
        if (marks) {
            if (Array.isArray(marks)) {
                var list = marks.sort(function(a, b) {
                    return a.value - b.value;
                }).filter(function(point) {
                    return point.value >= min && point.value <= max;
                });
                setMarksList(list.map(function(mark) {
                    return mark.value;
                }));
                list.forEach(function(mark) {
                    marksRef.current[mark.value] = mark.label !== undefined ? mark.label : mark.value;
                });
            } else {
                var marksKeys = Object.keys(marks);
                var list1 = marksKeys.map(parseFloat).sort(function(a, b) {
                    return a - b;
                }).filter(function(point) {
                    return point >= min && point <= max;
                });
                setMarksList(list1);
            }
        }
    }, [
        marks,
        max,
        min
    ]);
    var _obj;
    var classes = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled"), disabled), (0, _define_property._)(_obj, verticalClassPrefix, vertical), (0, _define_property._)(_obj, "".concat(classPrefix, "-native"), isHm), _obj));
    var _obj1;
    var containerClasses = (0, _classnames.default)("".concat(classPrefix, "-container"), (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-container-native"), isHm), (0, _define_property._)(_obj1, "".concat(verticalClassPrefix, "-container"), vertical), _obj1), className);
    var markClassName = (0, _react.useCallback)(function(mark) {
        var classPrefix = 'nut-range-mark';
        var verticalClassPrefix = 'nut-range-vertical-mark';
        var lowerBound = min;
        var upperBound = max;
        if (range && Array.isArray(innerValue)) {
            lowerBound = innerValue[0];
            upperBound = innerValue[1];
        } else {
            upperBound = innerValue;
        }
        var isActive = mark <= upperBound && mark >= lowerBound;
        var _$classNames = [
            "".concat(classPrefix, "-text-wrapper"),
            "".concat(isActive ? "".concat(classPrefix, "-text-wrapper-active") : '')
        ];
        if (vertical) {
            _$classNames.push("".concat(verticalClassPrefix, "-text-wrapper"));
            isActive && _$classNames.push("".concat(verticalClassPrefix, "-text-wrapper-active"));
        }
        if (rtl) {
            _$classNames.push("".concat(rtlClassPrefix, "-mark-text-wrapper"));
        }
        return _$classNames.join(' ');
    }, [
        min,
        max,
        range,
        innerValue,
        vertical,
        rtl,
        rtlClassPrefix
    ]);
    var isRange = (0, _react.useCallback)(function(val) {
        return !!range && Array.isArray(val);
    }, [
        range
    ]);
    var calcMainAxis = (0, _react.useMemo)(function() {
        var modelVal = innerValue;
        return isRange(modelVal) ? "".concat((modelVal[1] - modelVal[0]) * 100 / scope, "%") : "".concat((modelVal - min) * 100 / scope, "%");
    }, [
        innerValue,
        isRange,
        min,
        scope
    ]);
    var calcOffset = (0, _react.useMemo)(function() {
        var modelVal = innerValue;
        return isRange(modelVal) ? "".concat((modelVal[0] - min) * 100 / scope, "%") : '0%';
    }, [
        innerValue,
        isRange,
        min,
        scope
    ]);
    var barStyle = (0, _react.useMemo)(function() {
        if (vertical) {
            return {
                height: calcMainAxis,
                top: calcOffset,
                transition: dragStatusRef.current ? 'none' : undefined
            };
        }
        var dir = rtl ? 'right' : 'left';
        var _obj;
        return _obj = {
            width: calcMainAxis
        }, (0, _define_property._)(_obj, dir, calcOffset), (0, _define_property._)(_obj, "transition", dragStatusRef.current ? 'none' : undefined), _obj;
    }, [
        calcMainAxis,
        calcOffset,
        rtl,
        vertical
    ]);
    var marksStyle = (0, _react.useCallback)(function(mark) {
        var dir = rtl ? 'right' : 'left';
        var style = (0, _define_property._)({}, dir, "".concat((mark - min) / scope * 100, "%"));
        if (vertical) {
            style = {
                top: "".concat((mark - min) / scope * 100, "%")
            };
        }
        return style;
    }, [
        min,
        rtl,
        scope,
        vertical
    ]);
    var tickClass = (0, _react.useCallback)(function(mark) {
        if (range && Array.isArray(innerValue)) {
            return mark <= innerValue[1] && mark >= innerValue[0];
        }
        return mark <= innerValue;
    }, [
        innerValue,
        range
    ]);
    var format = (0, _react.useCallback)(function(value) {
        value = Math.max(+min, Math.min(value, +max));
        return Math.round(value / +step) * +step;
    }, [
        max,
        min,
        step
    ]);
    var updateValue = (0, _react.useCallback)(function(value, end) {
        if (isRange(value)) {
            value = handleOverlap(value).map(format);
        } else {
            value = format(value);
        }
        if (!isSameValue(value, innerValue)) {
            setInnerValue(value);
        }
        end && onEnd && onEnd(value);
    }, [
        innerValue,
        format,
        isRange,
        onEnd,
        setInnerValue
    ]);
    var handleClick = (0, _react.useCallback)(function(event) {
        return (0, _async_to_generator._)(function() {
            var _event_detail, rect, _event_detail_x, x, delta, total, _event_detail1, _event_detail_y, y, value, _innerValue, left, right, middle;
            return (0, _ts_generator._)(this, function(_state) {
                switch(_state.label){
                    case 0:
                        if (disabled || !root.current) return [
                            2
                        ];
                        // TODO 鸿蒙获取clientX的数据有误，windowX 也变成了 undefined。暂不支持，待上游支持。
                        if (isHm) return [
                            2
                        ];
                        dragStatusRef.current = '';
                        return [
                            4,
                            (0, _getrect.getRectInMultiPlatform)(root.current)
                        ];
                    case 1:
                        rect = _state.sent();
                        x = (_event_detail_x = (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.x) !== null && _event_detail_x !== void 0 ? _event_detail_x : event.clientX;
                        if (isHm) x = parseFloat((0, _pxtransform.pxTransform)(event.windowX || x));
                        delta = x - rect.left;
                        total = rect.width;
                        if (vertical) {
                            ;
                            ;
                            y = (_event_detail_y = (_event_detail1 = event.detail) === null || _event_detail1 === void 0 ? void 0 : _event_detail1.y) !== null && _event_detail_y !== void 0 ? _event_detail_y : event.clientY;
                            if (isHm) y = parseFloat((0, _pxtransform.pxTransform)(event.windowY || y));
                            delta = y - rect.top;
                            total = rect.height;
                        }
                        value = min + delta / total * scope;
                        exactValueRef.current = innerValue;
                        if (isRange(innerValue)) {
                            _innerValue = (0, _sliced_to_array._)(innerValue, 2), left = _innerValue[0], right = _innerValue[1];
                            middle = (left + right) / 2;
                            if (value <= middle) {
                                updateValue([
                                    value,
                                    right
                                ], true);
                            } else {
                                updateValue([
                                    left,
                                    value
                                ], true);
                            }
                        } else {
                            updateValue(value, true);
                        }
                        return [
                            2
                        ];
                }
            });
        })();
    }, [
        innerValue,
        disabled,
        isRange,
        min,
        scope,
        updateValue,
        vertical
    ]);
    (0, _taro.useReady)(function() {
        var getRootRect = function getRootRect() {
            return (0, _async_to_generator._)(function() {
                var rect;
                return (0, _ts_generator._)(this, function(_state) {
                    switch(_state.label){
                        case 0:
                            if (!root.current) return [
                                3,
                                2
                            ];
                            return [
                                4,
                                (0, _getrect.getRectInMultiPlatform)(root.current)
                            ];
                        case 1:
                            rect = _state.sent();
                            rootRect.current = rect;
                            _state.label = 2;
                        case 2:
                            return [
                                2
                            ];
                    }
                });
            })();
        };
        (0, _taro.nextTick)(function() {
            getRootRect();
        });
    });
    var onTouchStart = (0, _react.useCallback)(function(event) {
        if (disabled) return;
        touch.start(event);
        exactValueRef.current = innerValue;
        if (isRange(innerValue)) {
            setStartValue(innerValue.map(format));
        } else {
            setStartValue(format(innerValue));
        }
        dragStatusRef.current = 'start';
    }, [
        innerValue,
        disabled,
        format,
        isRange,
        touch
    ]);
    var onTouchMove = (0, _react.useCallback)(function(event) {
        return (0, _async_to_generator._)(function() {
            var handleMove;
            return (0, _ts_generator._)(this, function(_state) {
                // @TODO RN、鸿蒙端垂直滑动时，页面会一同滑动，待解决
                if (disabled || !root.current) return [
                    2
                ];
                if (dragStatusRef.current === 'start') {
                    onStart && onStart();
                    dragStatusRef.current = 'draging';
                }
                touch.move(event);
                handleMove = function handleMove() {
                    return (0, _async_to_generator._)(function() {
                        var delta, total, diff, newValue;
                        return (0, _ts_generator._)(this, function(_state) {
                            if (!rootRect.current) return [
                                2
                            ];
                            delta = isHm ? parseFloat((0, _pxtransform.pxTransform)(touch.deltaX.current)) : touch.deltaX.current;
                            total = rootRect.current.width;
                            diff = delta / total * scope;
                            diff = rtl ? -diff : diff;
                            if (vertical) {
                                delta = isHm ? parseFloat((0, _pxtransform.pxTransform)(touch.deltaY.current)) : touch.deltaY.current;
                                total = rootRect.current.height;
                                diff = delta / total * scope;
                            }
                            newValue = startValue + diff;
                            if (isRange(startValue)) {
                                newValue = exactValueRef.current.slice();
                                newValue[buttonRef.current] = startValue[buttonRef.current] + diff;
                            }
                            exactValueRef.current = newValue;
                            updateValue(newValue);
                            return [
                                2
                            ];
                        });
                    })();
                };
                requestAnimationFrame(handleMove);
                return [
                    2
                ];
            });
        })();
    }, [
        disabled,
        isRange,
        onStart,
        rtl,
        scope,
        startValue,
        touch,
        updateValue,
        vertical
    ]);
    var onTouchEnd = (0, _react.useCallback)(function() {
        if (disabled) return;
        if (dragStatusRef.current === 'draging') {
            updateValue(innerValue, true);
        }
        dragStatusRef.current = '';
    }, [
        innerValue,
        disabled,
        updateValue
    ]);
    var curValue = (0, _react.useCallback)(function(idx) {
        var modelVal = innerValue;
        var value = typeof idx === 'number' ? modelVal[idx] : modelVal;
        return value;
    }, [
        innerValue
    ]);
    var buttonNumberTransform = (0, _react.useMemo)(function() {
        return vertical ? 'translate(100%, -50%)' : 'translate(-50%, -100%)';
    }, [
        vertical
    ]);
    var renderButton = (0, _react.useCallback)(function(index) {
        var _obj, _obj1;
        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, button || /*#__PURE__*/ _react.default.createElement(_components.View, {
            className: (0, _classnames.default)("".concat(classPrefix, "-button"), (_obj = {}, (0, _define_property._)(_obj, "".concat(verticalClassPrefix, "-button"), vertical), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-button"), rtl), _obj)),
            style: {
                transform: 'translate(-50%, -50%)'
            }
        }, currentDescription !== null && /*#__PURE__*/ _react.default.createElement(_components.Text, {
            className: (0, _classnames.default)("".concat(classPrefix, "-button-number"), (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(verticalClassPrefix, "-button-number"), vertical), (0, _define_property._)(_obj1, "".concat(rtlClassPrefix, "-button-number"), rtl), _obj1)),
            style: {
                transform: buttonNumberTransform
            }
        }, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
    }, [
        button,
        buttonNumberTransform,
        curValue,
        currentDescription,
        rtl,
        rtlClassPrefix,
        vertical
    ]);
    var renderMarks = (0, _react.useCallback)(function() {
        if (marksList.length <= 0) return null;
        var _obj;
        var markcls = (0, _classnames.default)("".concat(classPrefix, "-mark"), (_obj = {}, (0, _define_property._)(_obj, "".concat(verticalClassPrefix, "-mark"), vertical), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-mark"), rtl), (0, _define_property._)(_obj, "".concat(vertical ? verticalClassPrefix : classPrefix, "-mark-hm"), isHm), _obj));
        var textcls = (0, _classnames.default)("".concat(classPrefix, "-mark-text"), (0, _define_property._)({}, "".concat(verticalClassPrefix, "-mark-text"), vertical));
        return /*#__PURE__*/ _react.default.createElement(_components.View, {
            className: markcls
        }, marksList.map(function(mark) {
            var _obj;
            return /*#__PURE__*/ _react.default.createElement(_components.View, {
                key: mark,
                className: markClassName(mark),
                style: marksStyle(mark)
            }, /*#__PURE__*/ _react.default.createElement(_components.Text, {
                className: textcls
            }, Array.isArray(marks) ? marksRef.current[mark] : marks[mark]), /*#__PURE__*/ _react.default.createElement(_components.View, {
                className: (0, _classnames.default)("".concat(vertical ? verticalClassPrefix : classPrefix, "-tick"), (_obj = {}, (0, _define_property._)(_obj, "".concat(vertical ? verticalClassPrefix : classPrefix, "-tick-active"), tickClass(mark)), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-tick"), rtl), _obj))
            }));
        }));
    }, [
        markClassName,
        marks,
        marksList,
        marksStyle,
        rtl,
        rtlClassPrefix,
        tickClass,
        vertical
    ]);
    var renderRangeButton = (0, _react.useCallback)(function() {
        return [
            0,
            1
        ].map(function(_, index) {
            var suffix = index === 0 ? 'left' : 'right';
            var _obj;
            var cls = (0, _classnames.default)("".concat(classPrefix, "-button-wrapper-").concat(suffix), (_obj = {}, (0, _define_property._)(_obj, "".concat(verticalClassPrefix, "-button-wrapper-").concat(suffix), vertical), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-button-wrapper-").concat(suffix), rtl), _obj));
            return /*#__PURE__*/ _react.default.createElement(_components.View, {
                key: index,
                className: cls,
                style: {
                    transform: 'translate(-50%, -50%)'
                },
                onTouchStart: function onTouchStart1(e) {
                    buttonRef.current = index;
                    onTouchStart(e);
                },
                onTouchMove: onTouchMove,
                onTouchEnd: onTouchEnd,
                onTouchCancel: onTouchEnd,
                onClick: function onClick(e) {
                    return e.stopPropagation();
                }
            }, renderButton(index));
        });
    }, [
        onTouchEnd,
        onTouchMove,
        onTouchStart,
        renderButton,
        vertical,
        rtl,
        rtlClassPrefix
    ]);
    var renderSingleButton = (0, _react.useCallback)(function() {
        return /*#__PURE__*/ _react.default.createElement(_components.View, {
            catchMove: true,
            className: (0, _classnames.default)("".concat(classPrefix, "-button-wrapper"), (0, _define_property._)({}, "".concat(verticalClassPrefix, "-button-wrapper"), vertical)),
            style: {
                transform: 'translate(-50%, -50%)'
            },
            onTouchStart: onTouchStart,
            onTouchMove: onTouchMove,
            onTouchEnd: onTouchEnd,
            onTouchCancel: onTouchEnd,
            onClick: function onClick(e) {
                return e.stopPropagation();
            }
        }, renderButton());
    }, [
        onTouchEnd,
        onTouchMove,
        onTouchStart,
        renderButton,
        vertical
    ]);
    var renderButtonWrapper = (0, _react.useCallback)(function() {
        return /*#__PURE__*/ _react.default.createElement(_components.View, {
            className: "".concat(classPrefix, "-bar ").concat(isHm ? '' : "".concat(classPrefix, "-bar-animate"), "}"),
            style: barStyle
        }, range ? renderRangeButton() : renderSingleButton());
    }, [
        renderRangeButton,
        renderSingleButton,
        range,
        barStyle
    ]);
    return /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: containerClasses,
        style: style
    }, minDescription !== null && /*#__PURE__*/ _react.default.createElement(_components.Text, {
        className: "".concat(classPrefix, "-min")
    }, minDescription || min), /*#__PURE__*/ _react.default.createElement(_components.View, {
        ref: root,
        className: classes,
        onClick: handleClick
    }, renderMarks(), renderButtonWrapper()), maxDescription !== null && /*#__PURE__*/ _react.default.createElement(_components.Text, {
        className: "".concat(classPrefix, "-max")
    }, maxDescription || max));
};
Range.displayName = 'NutRange';
