import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
const useJoystick = (ref, callbacks)=>{
    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
        if (!ref.current) return;
        const config = {
            radius: 20
        };
        const ele = ref.current;
        let pressing = false;
        let prevX = 0;
        let prevY = 0;
        let newX = 0;
        let newY = 0;
        let relX = 0;
        let relY = 0;
        let moveX = 0;
        let moveY = 0;
        let displayX = 0;
        let displayY = 0;
        ele.addEventListener('mousedown', down);
        ele.addEventListener('mousemove', move);
        ele.addEventListener('mouseup', up);
        ele.addEventListener('touchstart', down);
        ele.addEventListener('touchmove', move);
        ele.addEventListener('touchend', up);
        ele.addEventListener('contextmenu', onContextmenu);
        ele.addEventListener('mousewheel', onMousewheel);
        const stickEle = createStickCanvas();
        const baseEle = createBaseCanvas();
        ele.appendChild(baseEle);
        baseEle.style.position = 'absolute';
        baseEle.style.visibility = 'hidden';
        ele.appendChild(stickEle);
        stickEle.style.position = 'absolute';
        stickEle.style.visibility = 'hidden';
        function down(event) {
            if (1 === event.buttons) {
                pressing = true;
                prevX = getClientPosition(event).x;
                prevY = getClientPosition(event).y;
                baseEle.style.visibility = 'visible';
                stickEle.style.visibility = 'visible';
                stickMove(stickEle.style, prevX - stickEle.width / 2, prevY - stickEle.height / 2);
                stickMove(baseEle.style, prevX - baseEle.width / 2, prevY - baseEle.height / 2);
            }
        }
        function up(event) {
            pressing = false;
            baseEle.style.visibility = 'hidden';
            stickEle.style.visibility = 'hidden';
        }
        function moveTable(relX, relY) {
            const tables = document.querySelectorAll('.ant-table-content');
            const main = document.querySelector('main');
            tables.forEach((table)=>{
                table.scrollBy(10 * relX, 0);
            });
            main.scrollBy(0, -10 * relY);
        }
        let moveRelX = 0;
        let moveRelY = 0;
        const timerId = setInterval(()=>{
            if (pressing) moveTable(moveRelX, moveRelY);
        }, 16);
        function move(event) {
            if (pressing) {
                newX = getClientPosition(event).x;
                newY = getClientPosition(event).y;
                relX = newX - prevX;
                relY = prevY - newY;
                const distance = Math.sqrt(Math.pow(relX, 2) + Math.pow(relY, 2));
                const stickNormalizedX = relX / distance;
                const stickNormalizedY = relY / distance;
                moveRelX = stickNormalizedX;
                moveRelY = stickNormalizedY;
                if (distance <= config.radius) {
                    moveX = newX - stickEle.width / 2;
                    moveY = newY - stickEle.height / 2;
                    stickMove(stickEle.style, moveX, moveY);
                } else {
                    moveX = stickNormalizedX * config.radius + prevX - stickEle.width / 2;
                    moveY = -stickNormalizedY * config.radius + prevY - stickEle.height / 2;
                    stickMove(stickEle.style, moveX, moveY);
                }
                config.radius;
                config.radius;
            }
        }
        function onMousewheel(event) {
            moveTable(event.deltaY, 0);
        }
        function onContextmenu(event) {
            event.stopPropagation();
            event.preventDefault();
            callbacks.onContextmenu(event);
        }
        function createStickCanvas() {
            const canvas = document.createElement('canvas');
            canvas.width = 40;
            canvas.height = 40;
            const ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.lineWidth = 6;
            ctx.arc(canvas.width / 2, canvas.width / 2, 40, 0, 2 * Math.PI, true);
            ctx.stroke();
            return canvas;
        }
        function createBaseCanvas() {
            const canvas = document.createElement('canvas');
            canvas.width = 60;
            canvas.height = 60;
            const ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.lineWidth = 6;
            ctx.arc(canvas.width / 2, canvas.width / 2, 5, 0, 2 * Math.PI, true);
            ctx.stroke();
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.arc(canvas.width / 2, canvas.width / 2, 10, 0, 2 * Math.PI, true);
            ctx.stroke();
            return canvas;
        }
        function stickMove(style, x, y) {
            const transform = supportTransform();
            if (transform) style[transform] = 'translate(' + x + 'px,' + y + 'px)';
            else {
                style.left = x + 'px';
                style.top = y + 'px';
            }
        }
        function supportTransform() {
            const styles = [
                'webkitTransform',
                'MozTransform',
                'msTransform',
                'OTransform',
                'transform'
            ];
            const el = document.createElement('p');
            let style;
            for(let i = 0; i < styles.length; i++){
                style = styles[i];
                if (null != el.style[style]) return style;
            }
        }
        function getClientPosition(event) {
            if (event instanceof TouchEvent) return {
                x: event.touches[0].clientX,
                y: event.touches[0].clientY
            };
            return {
                x: event.clientX - ele.offsetLeft,
                y: event.clientY - ele.offsetTop
            };
        }
        return ()=>{
            clearInterval(timerId);
            null == ele || ele.removeEventListener('mousedown', down);
            null == ele || ele.removeEventListener('mousemove', move);
            null == ele || ele.removeEventListener('mouseup', up);
            null == ele || ele.removeEventListener('touchstart', down);
            null == ele || ele.removeEventListener('touchmove', move);
            null == ele || ele.removeEventListener('touchend', up);
        };
    });
};
export { useJoystick };
