import ms from 'pretty-ms';
import React, { useState } from 'react';
import { createGame } from '../../../domain/apiMethods';
import { MAP_CRUNCH, RANDOM_STREET_VIEW, URBAN } from '../../../domain/genMethods';
import { FROZEN, NORMAL, TIME_BANK } from '../../../domain/ruleSets';
import Loading from '../Loading';
import { Dropdown, DropdownGroup, Item } from './Dropdown';
import styles from './GameCreationForm.module.css';

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

  if (loading) {
    return <Loading />;
  }

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

  return (
    <div className={styles.form}>
      <div className={styles.dropdowns}>
        <DropdownGroup>
          <Dropdown onSelect={setTimer} open='timer'>
            <Item value={30} display={ms(30 * 1000)}>30 Seconds</Item>
            <Item value={120} display={ms(2 * 60 * 1000)}>2 Minutes</Item>
            <Item value={300} display={ms(5 * 60 * 1000)} default>5 Minutes</Item>
            <Item value={3600} display={ms(60 * 60 * 1000)}>1 Hour</Item>
          </Dropdown>
          <Dropdown onSelect={setRounds} open='rounds'>
            <Item value={1}>1 Round</Item>
            <Item value={3}>3 Rounds</Item>
            <Item value={5} default>5 Rounds</Item>
            <Item value={10}>10 Rounds</Item>
          </Dropdown>
          <Dropdown onSelect={setOnlyAmerica} open='america'>
            <Item value={false} display='🌎' default>All Countries</Item>
            <Item value={true} display='🇺🇸'>Just America</Item>
          </Dropdown>
          <Dropdown onSelect={setGenMethod} open='gen'>
            <Item value={MAP_CRUNCH} display='MC' default>Map Crunch</Item>
            <Item value={RANDOM_STREET_VIEW} display='RSV'>Random Street View</Item>
            <Item value={URBAN} display='🏙️'>Urban Centers</Item>
          </Dropdown>
          <Dropdown onSelect={setRuleSet} open='rule'>
            <Item value={NORMAL} display='⏰' default>Normal</Item>
            <Item value={TIME_BANK} display='🏦'>Time Bank</Item>
            <Item value={FROZEN} display='❄️'>Frozen</Item>
          </Dropdown>
        </DropdownGroup>
      </div>
      <button className={styles.start} onClick={onCreateGame}>
        New Game
      </button>
    </div>
  );
};