import { IonContent } from '@ionic/react';
import react, { useState } from 'react';

import './Map.css';
import MouseHandler from './MouseHandler';
import SlippyBoard from './SlippyBoard';
import Tile from './Tile';
import fakeTile from './FakeTile.svg';

interface MapProperties {
  height: number;
  width: number;
}

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

  const [shift, setShift] = useState({ x: 0, y: 0 });
  const [zoom, setZoom] = useState(1);

  const addShift = (deltaShift: { x: number; y: number }) => {
    setShift({ x: shift.x + deltaShift.x, y: shift.y + deltaShift.y });
  };

  const addZoom = (zoomFactor: number, center: { x: number; y: number }) => {
    addShift({
      x: (shift.x - center.x) * (zoomFactor - 1),
      y: (shift.y - center.y) * (zoomFactor - 1),
    });
    setZoom(zoom * zoomFactor);
  };

  var tiledLayer: any[] = [];
  for (let row = 0; row < nbTiles; row++) {
    for (let col = 0; col < nbTiles; col++) {
      tiledLayer.push(
        <Tile
          key={`${row}/${col}`}
          href={fakeTile}
          x={col * 256}
          y={row * 256}
          delay={20 * col * row}
        />
      );
    }
  }

  return (
    <IonContent fullscreen={true}>
      <div
        className='map'
        style={{ width: props.width + 'px', height: props.height + 'px' }}
      >
        <MouseHandler
          shift={shift}
          addShift={addShift}
          zoom={zoom}
          addZoom={addZoom}
          boardSize={boardSize}
        />
        <SlippyBoard
          boardSize={boardSize}
          shift={shift}
          zoom={zoom}
          layers={[
            {
              key: 'background',
              content: (
                <rect
                  x='0'
                  y='0'
                  width={boardSize}
                  height={boardSize}
                  fill='red'
                />
              ),
            },
            { key: 'tiles', content: tiledLayer },
            { key: 'circle', content: <circle cx='50' cy='50' r='50' /> },
          ]}
        />
      </div>
    </IonContent>
  );
};

export default Map;