import React, { useState } from "react";
import styled from "styled-components";
import ms from "pretty-ms";
import Loading from "./Loading";
import Button from "./Button";
import { createGame } from "../../domain/apiMethods";
import Dropdown from "./Dropdown";

const Container = styled.div`
  display: flex;
  flex-flow: column-reverse nowrap;
  justify-content: space-between;
  width: 50%;
  align-self: center;
`

const DropdownContainer = styled.div`
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
`;

const StartButton = styled(Button)`
  margin-bottom: 5px;
  width: 100%;
`

export default ({ afterCreate }) => {
  const [loading, setLoading] = useState(false);
  const [timer, setTimer] = useState(300);
  const [rounds, setRounds] = useState(5);
  const [onlyAmerica, setOnlyAmerica] = useState(false);

  if (loading) {
    return <Loading/>
  }

  const onCreateGame = async () => {
    setLoading(true);
    const gameId = await createGame(timer, rounds, onlyAmerica);
    if (afterCreate) {
      afterCreate(gameId);
    }
  };

  return (
    <Container>
      <DropdownContainer>
        <Dropdown
          options={{
            "30 Seconds": 30,
            "2 Minutes": 120,
            "5 Minutes": 300,
            "1 Hour": 3600,
          }}
          onChange={setTimer}
        >
          Round Timer: {ms(timer * 1000)}
        </Dropdown>
        <Dropdown
          options={{
            "1 Round": 1,
            "3 Rounds": 3,
            "5 Rounds": 5,
            "10 Rounds": 10,
          }}
          onChange={setRounds}
        >
          Rounds: {rounds}
        </Dropdown>
        <Dropdown
          options={{
            "All Countries": false,
            "Just America": true,
          }}
          onChange={setOnlyAmerica}
        >
          {onlyAmerica ? "Just America" : "All Countries" }
        </Dropdown>
      </DropdownContainer>
      <StartButton onClick={onCreateGame}>
        Create New Game
      </StartButton>
    </Container>
  );
}