import React, { useEffect } from 'react';
import styled from 'styled-components';
import Loading from '../../util/Loading';
import GuessPane from "./GuessPane";
import PositionedStreetView from "./PositionedStreetView";
import { dispatch, useCurrentRound } from '../../../domain/gameStore';
import usePreventNavigation from '../../../hooks/usePreventNavigation';

const Container = styled.div`
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;

  @media only screen and (min-width: 600px) and (min-height: 600px) {
    display: block;
    position: relative;
    margin-bottom: 2px;
    margin-right: 2px;
  }
`

const StreetViewWrapper = styled.div`
  height: 100%;
  width: 100%;
  margin-bottom: 2px;
  flex: 3;
`

export default () => {
  // warn the user if they navigate away
  usePreventNavigation();
  const finished = useCurrentRound() === null;
  useEffect(() => { 
    if (finished) {
      dispatch.goToSummary();
    }
  }, [finished]);

  return finished
    ? <Loading />
    : (
      <Container>
        <StreetViewWrapper>
          <PositionedStreetView
            onPanoMoved={(lat, lng, head, pitch) => console.log(`${lat}, ${lng}, ${head}, ${pitch}`)}
          />
        </StreetViewWrapper>
        <GuessPane />
      </Container>
    );
}