"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Drag", {
    enumerable: true,
    get: function() {
        return Drag;
    }
});
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
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 _components = require("@tarojs/components");
var _typings = require("../../utils/typings");
var _getrect = require("../../utils/taro/get-rect");
var _getsysteminfo = require("../../utils/taro/get-system-info");
var _platform = require("../../utils/taro/platform");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
    attract: false,
    direction: undefined,
    boundary: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0
    },
    className: 'myDrag'
});
var Drag = function Drag(props) {
    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), attract = _$_object_spread.attract, direction = _$_object_spread.direction, boundary = _$_object_spread.boundary, onDrag = _$_object_spread.onDrag, onDragStart = _$_object_spread.onDragStart, onDragEnd = _$_object_spread.onDragEnd, children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style;
    var classPrefix = 'nut-drag';
    var _useState = (0, _sliced_to_array._)((0, _react.useState)(boundary), 2), boundaryState = _useState[0], setBoundaryState = _useState[1];
    var myDrag = (0, _react.useRef)(null);
    var dragRef = (0, _react.useRef)(null);
    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)({}), 2), currstyle = _useState1[0], setCurrStyle = _useState1[1];
    var timer = (0, _react.useRef)(0);
    var axisCache = (0, _react.useRef)({
        x: 0,
        y: 0
    });
    var transformCache = (0, _react.useRef)({
        x: 0,
        y: 0
    });
    var translateX = (0, _react.useRef)(0);
    var translateY = (0, _react.useRef)(0);
    var middleLine = (0, _react.useRef)(0);
    var getInfo = function getInfo() {
        return (0, _async_to_generator._)(function() {
            var el, top, left, bottom, right, _getWindowInfo, screenWidth, windowHeight, _ref, width, height, dragTop, dragLeft;
            return (0, _ts_generator._)(this, function(_state) {
                switch(_state.label){
                    case 0:
                        el = myDrag.current;
                        if (!el) return [
                            3,
                            2
                        ];
                        top = boundary.top, left = boundary.left, bottom = boundary.bottom, right = boundary.right;
                        _getWindowInfo = (0, _getsysteminfo.getWindowInfo)(), screenWidth = _getWindowInfo.screenWidth, windowHeight = _getWindowInfo.windowHeight;
                        return [
                            4,
                            (0, _getrect.getRectInMultiPlatform)(dragRef.current)
                        ];
                    case 1:
                        _ref = _state.sent(), width = _ref.width, height = _ref.height, dragTop = _ref.top, dragLeft = _ref.left;
                        setBoundaryState({
                            top: -dragTop + top,
                            left: -dragLeft + left,
                            bottom: windowHeight - dragTop - bottom - Math.ceil(height),
                            right: screenWidth - dragLeft - right - Math.ceil(width)
                        });
                        middleLine.current = screenWidth - width - dragLeft - (screenWidth - width) / 2;
                        _state.label = 2;
                    case 2:
                        return [
                            2
                        ];
                }
            });
        })();
    };
    var touchStart = function touchStart(e) {
        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
        var touches = e.touches[0];
        axisCache.current = {
            x: touches.clientX,
            y: touches.clientY
        };
        transformCache.current = {
            x: translateX.current,
            y: translateY.current
        };
    };
    var touchMove = function touchMove(e) {
        if (e.touches.length === 1 && dragRef.current) {
            var touch = e.touches[0];
            var x = touch.clientX - axisCache.current.x;
            var y = touch.clientY - axisCache.current.y;
            translateX.current = x + transformCache.current.x;
            translateY.current = y + transformCache.current.y;
            onDrag === null || onDrag === void 0 ? void 0 : onDrag({
                offset: [
                    translateX.current,
                    translateY.current
                ]
            });
            // 边界判断
            if (translateX.current < boundaryState.left) {
                translateX.current = boundaryState.left;
            } else if (translateX.current > boundaryState.right) {
                translateX.current = boundaryState.right;
            }
            if (translateY.current < boundaryState.top) {
                translateY.current = boundaryState.top;
            } else if (translateY.current > boundaryState.bottom) {
                translateY.current = boundaryState.bottom;
            }
            var transform = "translate3d(".concat(direction !== 'y' ? translateX.current : 0, "px, ").concat(direction !== 'x' ? translateY.current : 0, "px, 0px)");
            setCurrStyle({
                transform: transform
            });
        }
    };
    var touchEnd = function touchEnd() {
        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd({
            offset: [
                translateX.current,
                translateY.current
            ]
        });
        if (direction !== 'y' && attract && dragRef.current) {
            if (translateX.current < middleLine.current) {
                translateX.current = boundaryState.left;
            } else {
                translateX.current = boundaryState.right;
            }
            var transform = "translate3d(".concat(translateX.current, "px, ").concat(direction !== 'x' ? translateY.current : 0, "px, 0px)");
            setCurrStyle({
                transform: transform
            });
        }
    };
    (0, _react.useEffect)(function() {
        if (dragRef.current) {
            if ((0, _platform.web)()) {
                timer.current = window.setTimeout(function() {
                    getInfo();
                }, 300);
            } else {
                getInfo();
            }
        }
        return function() {
            clearTimeout(timer.current);
        };
    }, [
        dragRef.current
    ]);
    return /*#__PURE__*/ _react.default.createElement(_components.View, {
        style: style,
        className: "".concat(classPrefix, " ").concat(className),
        ref: myDrag
    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: "".concat(classPrefix, "-inner"),
        ref: dragRef,
        catchMove: true,
        // @ts-ignore
        onTouchStart: touchStart,
        // @ts-ignore
        onTouchMove: touchMove,
        onTouchEnd: touchEnd,
        style: currstyle
    }, children));
};
Drag.displayName = 'NutDrag';
