import React, { useRef } from "react";
import styled from "styled-components";
import { useLastRound, dispatch } from "../../../domain/gameStore";
import useRoundInfo from "../../../hooks/useRoundInfo";
import DelayedButton from "../../util/DelayedButton";
import Button from "../../util/Button";
import useMapWithMarkers from "./useMapWithMarkers";

const SummaryDiv = styled.div`
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  background-color: #333;
  z-index: 1;
  bottom: 16px;
  right: 8px;
  padding: 8px;
`

const ScoreSpan = styled.span`
  padding-bottom: 2px;
`;

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

const FinishedButton = styled(Button)`
  margin-top: 5px;
  padding: 1em;
`

const NextButton = styled(DelayedButton)`
  margin-top: 5px;
  padding: 1em;
`

export default () => {
  // get the info about the last round
  const { roundNum, score, totalScore } = useLastRound();

  // draw the map
  const mapDivRef = useRef(null);
  useMapWithMarkers(mapDivRef);

  // whether or not the game is done
  const [gameFinished] = useRoundInfo();
  
  return (
    <div>
      <MapDiv ref={mapDivRef} />
      <SummaryDiv>
        <ScoreSpan>Score for Round {roundNum}: {score}</ScoreSpan>
        <ScoreSpan>Running Total: {totalScore}</ScoreSpan>
        {
          gameFinished 
            ? <FinishedButton onClick={dispatch.startRound}>
                View Summary
              </FinishedButton>
            : <NextButton onEnd={dispatch.startRound} countDownFormatter={rem => `Click to cancel, ${rem}s...`}>
                Next Round
              </NextButton>
        }
      </SummaryDiv>
    </div>
  );
};