import React, { useRef } from "react";
import styled from "styled-components";
import useMap from "../../../hooks/useMap";
import useMarkedPoints from "./useMarkedPoints";
import RoundInfoPane from "./RoundInfoPane";

const Container = styled.div`
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;

  @media only screen and (min-width: 600px) {
    flex-flow: row nowrap;
  }
`

const MapDiv = styled.div`
  height: 50%;
  width: 100%;

  @media only screen and (min-width: 600px) {
    width: 50%;
  }
`

export default ({ gameId, round, onNext }) => {
  const {
    roundNum,
    selectedPoint,
    targetPoint,
    score,
    totalScore,
  } = round;
  const mapDivRef = useRef(null);
  // TODO dynamically determine this zoom level?
  const mapRef = useMap(mapDivRef, targetPoint.lat, targetPoint.lng, 4);
  useMarkedPoints(mapRef, selectedPoint, targetPoint);

  return (
    <Container>
      <MapDiv ref={mapDivRef} />
      <RoundInfoPane {...{ gameId, selectedPoint, targetPoint, roundNum, score, totalScore, onNext }}/>
    </Container>
  );
};