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

import './Map.css';
import MouseHandler from './MouseHandler';
import Viewport from './Viewport';

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

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

  return (
    <IonContent fullscreen={true}>
      <div
        className='map'
        style={{ width: props.width + 'px', height: props.height + 'px' }}
      >
        <MouseHandler shift={{ x: 0, y: 0 }} zoom={1} boardSize={boardSize} />
      </div>
    </IonContent>
  );
};

export default Map;