import React, { useRef, useMemo, useState, useEffect, RefObject, MutableRefObject } from 'react';

export type ConstRef<T> = Readonly<MutableRefObject<T>>;

export interface ElementSize {
  width: number;
  height: number;
}

export interface ElementScroll {
  x: number;
  y: number;
}

export interface GridListItemData {
  key: string;
  height: number;
  width: number;
}

export interface GridListEntry<P> {
  item: P;
  data: GridListItemData;
}

export interface GridListConfigData<P> {
  windowMargin: number;
  gridGap: number;
  columnCount: number;
  entries: GridListEntry<P>[];
}

export interface GridListContainerData {
  windowSize: ElementSize;
  elementSize: ElementSize | null;
  windowScroll: ElementScroll;
  elementWindowOffset: number | null;
}

export interface GridListCell<P> {
  key: string;
  columnNumber: number;
  rowNumber: number;
  offset: number;
  height: number;
  width: number;
  item: P;
}

export interface GridListLayoutData<P> {
  totalHeight: number;
  cells: GridListCell<P>[];
}

export interface GridListRenderData<P> {
  cellsToRender: GridListCell<P>[];
  firstRenderedRowNumber: number | null;
  firstRenderedRowOffset: number | null;
}