import { ref } from "vue";
/**
 * Calculates vertical and horizontal message offsets
 */
export default function useOffsetCalculator() {
    const xOffset = ref(0);
    const yOffset = ref(0);
    const firstChildMarginTop = 0;
    let previousMessageHeight = 0;
    const messagePadding = 15;

    function calculateX(message: HTMLElement| SVGGElement): void {
        const computedQuery = window.getComputedStyle(message);
        const matrix = new WebKitCSSMatrix(computedQuery.webkitTransform);
        xOffset.value = matrix.m41;
    }

    function calculateY(messageHeight: number): void {
        if (previousMessageHeight === 0) {
            yOffset.value = firstChildMarginTop;
        } else {
            yOffset.value += previousMessageHeight + messagePadding;
        }
        previousMessageHeight = messageHeight;
    }

    const calculateMessageOffsets = (msg: HTMLElement): { x: number; y: number } => {
        const msgRect = msg.getBoundingClientRect();
        calculateX(msg);
        calculateY(msgRect.height);
        const offsets = {
            x: xOffset.value as number,
            y: yOffset.value as number
        };
        return offsets;
    }

    return {
        calculateMessageOffsets,
    }
}