export const dragAndDropPuppeteerDriverFactory = ({ element }) => {
    return {
        beginDrag: async ({ dataHook }) => {
            await element.page.evaluate((baseElement, sourceDataHook) => {
                const sourceElement = baseElement.querySelector(`[data-hook="${sourceDataHook}"]`);
                const { x, y, height } = sourceElement.getBoundingClientRect();
                sourceElement.dispatchEvent(new MouseEvent('mousedown', {
                    bubbles: true,
                    clientX: x,
                    clientY: y + height / 2,
                }));
            }, element.element, dataHook);
        },
        dragOver: async ({ dataHook, offset }) => {
            const moveMouseToNewPosition = () => element.page.evaluate((baseElement, destinationDataHook, xAxisOffset) => {
                const destinationElement = baseElement.querySelector(`[data-hook="${destinationDataHook}"]`);
                const { x, y, height } = destinationElement.getBoundingClientRect();
                const eventOptions = {
                    bubbles: true,
                    clientX: xAxisOffset ? x + xAxisOffset : x,
                    clientY: y + height / 2,
                };
                baseElement.dispatchEvent(new MouseEvent('mousemove', eventOptions));
            }, element.element, dataHook, offset?.x);
            // We have to do it twice, because one mousemove event is not enough for item to occupy the new position
            await moveMouseToNewPosition();
            await moveMouseToNewPosition();
        },
        endDrag: () => element.page.evaluate(baseElement => {
            baseElement.dispatchEvent(new MouseEvent('mouseup'));
        }, element.element),
    };
};
//# sourceMappingURL=dragAndDropPuppeteerDriverFactory.js.map