import React from "react";
import ClickToCopy from "../util/ClickToCopy";
import Button from "../util/Button";

// TODO eventually we want this to query and show other players

export default ({ round, onNext }) => {
  const {
    roundNum,
    selectedPoint,
    targetPoint,
    score,
    totalScore,
  } = round;
  // TODO determine zoom and center dynamically, or make this a dynamic map
  const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?key=AIzaSyCDtEWf192OYuMvd2cp8a04DYQo-RU_sXs`;
  const size = `&size=600x400`
  const zoom = `&zoom=5`;
  const centerOnTarget = `&center=${targetPoint.lat},${targetPoint.lng}`;
  const targetMarker = `&markers=color:blue|label:T|${targetPoint.lat},${targetPoint.lng}`;
  const selectedMarker = selectedPoint ? `&markers=color:red|label:S|${selectedPoint.lat},${selectedPoint.lng}` : ""

  return (
    <div className="round-summary">
      <img
        className="round-summary__map"
        src={mapUrl + size + zoom + centerOnTarget + targetMarker + selectedMarker}
        alt={`Map pointing to ${targetPoint.lat},${targetPoint.lng}`}
      />
      <div className="round-summary__info-pane">
        {selectedPoint 
          ? <span className="round-summary__guess">
              You selected: <ClickToCopy text={`${selectedPoint.lat}, ${selectedPoint.lng}`}/>
            </span> 
          : <span className="round-summary__guess round-summary__guess--timed-out">
              Timed out!
            </span>
        }
        <span className="round-summary__target-point">Target: <ClickToCopy text={`${targetPoint.lat}, ${targetPoint.lng}`}/></span>
        <span className="round-summary__round-score">Score For Round {roundNum}: {score}</span>
        <span className="round-summary__total-score">Running Total Score: {totalScore}</span>
        <Button className="round-summary__button" onClick={onNext}>{roundNum === "5" ? "View Summary" : "Next Round"}</Button>
      </div>
    </div>
  );
};