import React, { Component } from "react";
import axios from "axios";

const GPBBatting = (props) => (
  <tr>
    <td>{props.player.Player}</td>
    <td>{props.player.G_GS}</td>
    <td>{props.player.AB}</td>
    <td>{props.player.R}</td>
    <td>{props.player.H}</td>
    <td>{props.player.H2}</td>
    <td>{props.player.H3}</td>
    <td>{props.player.HR}</td>
    <td>{props.player.RBI}</td>
    <td>{props.player.SB_ATT}</td>
    <td>{props.player.BB}</td>
    <td>{props.player.SO}</td>
    <td>{props.player.BA}</td>
    <td>{props.player.OBP}</td>
    <td>{props.player.SLG}</td>
  
    <<<<<<I want the sum of OBP + SLG values here>>>>>

    <td>{props.player.TB}</td>
    <td>{props.player.SH}</td>
    <td>{props.player.SF}</td>
  </tr>
);

export default class PlayerBatting extends Component {
  constructor(props) {
    super(props);

    this.state = { players: [] };
  }

  componentDidMount() {
    axios
      .get("http://localhost:5000/gpbbatting/")
      .then((response) => {
        this.setState({ players: response.data });
      })
      .catch((error) => {
        console.log(error);
      });
  }

  PlayerBatting() {
    return this.state.players.map((currentplayer) => {
      return <GPBBatting player={currentplayer} key={currentplayer._id} />;
    });
  }

  render() {
    return (
      <div className="container">
        <style type="text/css">
          {`
                  th {
                      background-color: #DC3545;
                      color: #F9DEE0;
                  }
               `}
        </style>
        <br />
        <h3 className="text-light text-center">Overall Statistics</h3>

        <br />
        <div
          className="card"
          style={{
            width: "auto",
            height: "auto",
            backgroundColor: "white",
            paddingTop: "10px",
            paddingBottom: "10px",
            paddingRight: "10px",
            paddingLeft: "10px",
          }}
        >
          <div className='table-responsive-xl'>
            <table className="table table-striped mx-auto">
              <thead>
                <tr>
                  <th scope="col">Player</th>
                  <th scope="col">G</th>
                  <th scope="col">AB</th>
                  <th scope="col">R</th>
                  <th scope="col">H</th>
                  <th scope="col">2B</th>
                  <th scope="col">3B</th>
                  <th scope="col">HR</th>
                  <th scope="col">RBI</th>
                  <th scope="col">SB-ATT</th>
                  <th scope="col">BB</th>
                  <th scope="col">SO</th>
                  <th scope="col">BA</th>
                  <th scope="col">OBP</th>
                  <th scope="col">SLG</th>

                  <<<<<<<<The sum of OBP + SLG is gonna be displayed here>>>>>>>>
                  
                  <th scope="col">TB</th>
                  <th scope="col">SH</th>
                  <th scope="col">SF</th>
                </tr>
              </thead>
              <tbody>{this.PlayerBatting()}</tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }
}