import React from "react";
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import { faS, faSquare, faAngleUp, faAngleDown,fa1, fa2, fa3 } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

function Inning({inning, isTopHalf}){
  return (
    <div>
      {inning}<FontAwesomeIcon icon={isTopHalf ? faAngleUp : faAngleDown} ></FontAwesomeIcon>
    </div>
  )
}

function GameStateDisplay({inning, bases, isTopHalf, outs, count,  score, isFinal }){
  return (
    <div className="gameState">
      <header>Scoreboard</header>
      {!isFinal && (
        <div>
          <Row>
            <Col><Inning inning={inning} isTopHalf={isTopHalf}></Inning></Col>
            <Col>{count.balls}-{count.strikes}</Col>
            <Col>{outs} outs</Col>
            <Col>
              <FontAwesomeIcon icon={fa1} className={`base ${bases[0] ? `occupied ${bases[0]}` : ""}`}></FontAwesomeIcon>
              <FontAwesomeIcon icon={fa2} className={`base ${bases[1] ? `occupied ${bases[1]}` : ""}`}></FontAwesomeIcon>
              <FontAwesomeIcon icon={fa3} className={`base ${bases[2] ? `occupied ${bases[2]}` : ""}`}></FontAwesomeIcon>
            </Col>
          </Row>
          <Row>
          </Row>
        </div>
      )}
        <strong>{isFinal ? "FINAL!" : ""}</strong>
      <Row>
        <Col><strong> Away Score: </strong> {score.away}</Col>
        <Col><strong> Home Score: </strong> {score.home}</Col>
      </Row>
    </div>
  );
}

export default GameStateDisplay