import React from "react";
import ClickToCopy from "../util/click-to-copy.component";

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

const LabelAndPoint = ({ label, point }) => (
  <div>
    <span>{label}: </span>
    <div style={{display: "inline-flex"}}>
      <ClickToCopy text={`${point.lat},${point.lng}`}/>
    </div>
  </div>
);

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 style={{
      display: "flex",
      flexFlow: "column nowrap",
      justifyContent: "space-between",
      alignItems: "center",
    }}>
      <img
        src={mapUrl + size + zoom + centerOnTarget + targetMarker + selectedMarker}
        alt={`Map pointing to ${targetPoint.lat},${targetPoint.lng}`}
      />
      {selectedPoint ? <LabelAndPoint label="You Selected" point={selectedPoint}/> : <p>Timed out!</p>}
      <LabelAndPoint label="Target" point={targetPoint}/>
      <span>Score For Round {roundNum}: {score}</span>
      <span>Running Total Score: {totalScore}</span>
      <button onClick={onNext}>{roundNum === "5" ? "View Summary" : "Next Round"}</button>
    </div>
  );
};