import useRendererAnims from "./useRendererAnims";
import useOffsetCalculator from './useOffsetCalculator';
export default function useMessageRenderer() {

    const { calculateMessageOffsets } = useOffsetCalculator();
    const { shiftAnimate, stackAnimate } = useRendererAnims();

    let messageList: NodeList;
    let message: HTMLElement | null;
    let messageOffset = { x: 0, y: 0 };
    let shift = false;
    let shiftValue = 0;

    function animateMessage(el: SVGGElement): void {
        const transform = {
            initialTranslate: `translate(${messageOffset.x} ${messageOffset.y})`,
            finalTranslate: `translate(${messageOffset.x} ${messageOffset.y})`
        }
        shift ? shiftAnimate(el, transform, shiftValue, messageList) : stackAnimate(el, transform);
    }

    function beforeEnter(el: SVGGElement): void {
        const queryResult = document.querySelectorAll(".messageList");
        if (queryResult.length) messageList = queryResult;
    }

    function enter(el: SVGGElement): void {
        message = document.getElementById(el.id);
    }

    function afterEnter(el: SVGGElement) {
        const messagePadding = 15;

        if (message) {
            messageOffset = calculateMessageOffsets(message);
            shift = messageOffset.y > 445 ? true : false;
        }
        if (shift) {
            shiftValue -= el.getBBox().height + messagePadding;
        }
        animateMessage(el);
    }

    return {
        beforeEnter,
        enter,
        afterEnter
    };
}