import React from 'react';
import { getStatus, createGame, gameInfo } from "./services/ggsh.service";
import './App.css';

class InfoComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      version: null,
      status: null,
    }
  }

  async componentDidMount() {
    const { version, status } = await getStatus();
    this.setState({loading: false, version, status});
  }

  render() {
    if (this.state.loading) {
      return <p>Connecting to back-end...</p>
    }

    if (this.state.status !== "healthy") {
      return <p>Unable to communicate with API server! Error: {this.state.status}</p>
    }
    
    return <p>API Version: {this.state.version}</p>
  }
}

const GameInfo = ({game}) => {
  const {
    gameId,
    creator,
    timer,
    coords,
    players
  } = game;

  return (
    <div className="GameInfo">
      <p>Game ID: {gameId}</p>
      <p>Creator: {creator}</p>
      <p>Time Limit: {timer}</p>
      <p>Coordinates: {JSON.stringify(coords)}</p>
      <p>Players: {JSON.stringify(players)}</p>
    </div>
  );
}

class GameMakerComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      game: null,
    }
  }

  async onClick() {
    this.setState({loading: true});
    const gameId = await createGame("testing", 300);
    const game = await gameInfo(gameId);
    this.setState({loading: false, game});
  }

  render() {
    if (this.state.loading) {
      return <div><p>Loading...</p></div>
    }

    if (this.state.game) {
      return <div><GameInfo game={this.state.game}/></div>
    }
    return <div><button onClick={() => this.onClick()}>Create Game!</button></div>
  }
}

const App = () => {
  return (
    <div className="App">
      <p>TerrAssumptions!</p>
      <hr/>
      <GameMakerComp/>
      <hr/>
      <InfoComponent/>
    </div>
  );
}

export default App;