import { getGridColumnHandle, getGridRowHandle } from "../utils";
import { DragHandel } from "./dragHandle";
/**
 * Renders a set of horizontal drag handles for resizing rows.
 *
 * @param props - Props containing the number of items (rows).
 * @returns An array of `DragHandel` components.
 */
export function RowDragHandlers({ columns, rows }) {
    return Array(rows - 1)
        .fill(null)
        .map((_, index) => {
        let gridColumn = `1 / ${columns * 2}`;
        let gridRow = getGridRowHandle(index + 1);
        return (<DragHandel key={`row-${gridRow}`} style={{ gridColumn, gridRow }} orientation="horizontal" index={index + 1}/>);
    });
}
/**
 * Renders a set of vertical drag handles for resizing columns.
 *
 * @param props - Props containing the number of items (columns).
 * @returns An array of `DragHandel` components.
 */
export function ColDragHandlers({ rows, columns }) {
    return Array(columns - 1)
        .fill(null)
        .map((_, index) => {
        let gridColumn = getGridColumnHandle(index + 1);
        let gridRow = `1 / ${rows * 2}`;
        return (<DragHandel key={`col-${gridColumn}`} style={{ gridColumn, gridRow }} orientation="vertical" index={index + 1}/>);
    });
}
/**
 * Renders hidden grid areas to maintain the grid structure and allow querying for specific cells.
 * These elements are used for size calculations and to ensure the grid layout persists.
 *
 * @param props - Props containing the number of columns and rows.
 * @returns An array of `div` elements representing grid cells.
 */
export function HiddenGridAreas({ columns, rows }) {
    return Array(columns * rows)
        .fill(null)
        .map((_, arrayindex) => {
        let index = arrayindex + 1;
        let row = Math.ceil(index / columns);
        let column = index - (row - 1) * columns;
        let rowStart = row + (row - 1);
        let rowEnd = rowStart + 1;
        let colStart = column + (column - 1);
        let colEnd = colStart + 1;
        let gridArea = [rowStart, colStart, rowEnd, colEnd].join(" / ");
        let classNames = `row-${row} col-${column}`;
        return (<div key={gridArea} className={classNames} style={{
                gridArea,
                width: "100%",
                height: "100%",
            }}/>);
    });
}