import react from 'react';

import { Rectangle, TileKeyObject } from './types';

export interface TiledLayerProperties {
  /** The key of the first (ie top/left) tile */
  keyObject: TileKeyObject;
  /** Number of tiles (in each direction since TiledLayers are square)*/
  nbTiles: number;
  /** The current viewport expressed in tiles coordinates */
  viewPort: Rectangle;
}

/**
 * A lazily loaded square layer of tiles.
 *
 * This component is rather dumb and is mainly a sparse array of tiles.
 * New tiles are added to the array when the viewport is updated and they stay in the array until
 * the component is destroyed or its number of tiles is updated.
 *
 */
export const TiledLayer: react.FC<TiledLayerProperties> = (
  props: TiledLayerProperties
) => {
  return <></>;
};

export default TiledLayer;