import react from 'react';
import TiledLayer from './TiledLayer';

interface Point {
  x: number;
  y: number;
}

interface TiledLayerConductorProperties {
  height: number;
  width: number;
  shift: Point;
  zoom: number;
  tileSize: number;
}

const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
  props: TiledLayerConductorProperties
) => {
  const nbTiles =
    Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;

  return (
    <>
      {' '}
      <TiledLayer
        key='tile1'
        height={props.height}
        width={props.width}
        shift={props.shift}
        zoom={props.zoom}
        layerZoom={1}
        tileSize={256}
        nbTiles={nbTiles}
        active={props.zoom < 1.5}
      />
      <TiledLayer
        key='tile2'
        height={props.height * 2}
        width={props.width * 2}
        shift={{ x: props.shift.x * 2, y: props.shift.y * 2 }}
        zoom={props.zoom}
        layerZoom={0.5}
        tileSize={256}
        nbTiles={nbTiles * 2}
        active={props.zoom >= Math.SQRT2 && props.zoom < 2 * Math.SQRT2}
      />
      <TiledLayer
        key='tile3'
        height={props.height * 4}
        width={props.width * 4}
        shift={{ x: props.shift.x * 4, y: props.shift.y * 4 }}
        zoom={props.zoom}
        layerZoom={0.25}
        tileSize={256}
        nbTiles={nbTiles * 4}
        active={props.zoom >= 2 * Math.SQRT2}
      />
    </>
  );
};

export default TiledLayerConductor;