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

import './Map.css';
import MouseHandler from './MouseHandler';
import SlippyBoard from './SlippyBoard';
import TiledLayer from './TiledLayer';

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

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

  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);
  };

  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: 'tiles', content: <TiledLayer /> },
            { key: 'circle', content: <circle cx='50' cy='50' r='50' /> },
          ]}
        />
      </div>
    </IonContent>
  );
};

export default Map;