export const getRelativeClientXY = (ex: number, ey: number, target: HTMLElement) => {
    const rect = target.getBoundingClientRect();
    const x = ex - rect.left; //x position within the element.
    const y = ey - rect.top;  //y position within the element.
    return [Math.max(x, 0), Math.max(y, 0)];
}

export const getIndexOfCellInGrid = (x: number, y: number, columns: number, cellSize: number) => {
    const unitX = Math.floor(x / cellSize),
        unitY = Math.floor(y / cellSize);
    return unitY * columns + unitX;
}

export const getXYFromIndex = (index: number, columns: number) => {
    return [ index % columns, columns > 0 ? Math.floor(index / columns):0 ];
}

export const getCardXYFromIndex = (index: number, columns: number, cellSize: number, margin: number) => {
    const [ unitX, unitY ] = getXYFromIndex(index, columns);
    return [ unitX * cellSize + unitX * margin, unitY * cellSize + unitY * margin ];
}

export function useDragAndDrop() {

}