interface Dimension {
    maxTop: number | null;
    minTop: number | null;
    maxLeft: number | null;
    minLeft: number | null;
}

const getGroupDimension = (
    group: NodeListOf<HTMLElement>,
    containerRect: DOMRect,
    offsetX: number,
    offsetY: number
) => {
    let dimension: Dimension = { maxTop: null, minTop: null, maxLeft: null, minLeft: null };

    group.forEach((element: HTMLElement) => {
        const rect = element.getBoundingClientRect();

        dimension.minTop = Math.min(dimension.minTop ?? Infinity, rect.top);
        dimension.maxTop = Math.max(dimension.maxTop ?? 0, rect.bottom);

        dimension.minLeft = Math.min(dimension.minLeft ?? Infinity, rect.left);
        dimension.maxLeft = Math.max(dimension.maxLeft ?? 0, rect.right);
    });

    dimension.maxTop = dimension.maxTop !== null ? dimension.maxTop - containerRect.top + (offsetY - 10) : null;
    dimension.minTop = dimension.minTop !== null ? dimension.minTop - containerRect.top - (offsetY - 10) : null;

    dimension.maxLeft = dimension.maxLeft !== null ? dimension.maxLeft - containerRect.left + (offsetX - 10) : null;
    dimension.minLeft = dimension.minLeft !== null ? dimension.minLeft - containerRect.left - (offsetX - 10) : null;

    return dimension;
}


const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
    const dimension = getGroupDimension(groupElements, containerRect, offsetX, offsetY);
    const borderTop: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='top']");
    const borderRight: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='right']");
    const borderBottom: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='bottom']");
    const borderLeft: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='left']");

    console.log("handleGroupBorderPosition")

    if (borderTop !== null && dimension.maxLeft !== null && dimension.minLeft !== null) {
        borderTop.style.width = (dimension.maxLeft - dimension.minLeft) + "px";
        borderTop.style.height = "1px";
        borderTop.style.top = dimension.minTop + "px";
        borderTop.style.left = dimension.minLeft + "px";
    }

    if (borderRight !== null && dimension.maxTop !== null && dimension.minTop !== null) {
        borderRight.style.width = "1px";
        borderRight.style.height = (dimension.maxTop - dimension.minTop) + "px";
        borderRight.style.top = dimension.minTop + "px";
        borderRight.style.left = dimension.maxLeft + "px";
    }

    if (borderBottom !== null && dimension.maxLeft !== null && dimension.minLeft !== null) {
        borderBottom.style.width = (dimension.maxLeft - dimension.minLeft) + "px";
        borderBottom.style.height = "1px";
        borderBottom.style.top = dimension.maxTop + "px";
        borderBottom.style.left = dimension.minLeft + "px";
    }

    if (borderLeft !== null && dimension.maxTop !== null && dimension.minTop !== null) {
        borderLeft.style.width = "1px";
        borderLeft.style.height = (dimension.maxTop - dimension.minTop) + "px";
        borderLeft.style.top = dimension.minTop + "px";
        borderLeft.style.left = dimension.minLeft + "px";
    }
}

// const handleTargetBorderEventListener = (groupId: string, containerRect: DOMRect) => {
//     console.log("handleTargetBorderEventListener called for groupId:", groupId);
//     if (groupId) {
//         const groupElements: NodeListOf<HTMLElement> = document.querySelectorAll(`div[group="${groupId}"]`);
//         handleGroupBorderPosition(groupElements, containerRect);
//     }
// }

const handleInitialGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
    setTimeout(() => {
        handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY)
    }, 0)
}

export {
    getGroupDimension,
    handleGroupBorderPosition,
    handleInitialGroupBorderPosition
    // handleTargetBorderEventListener
}