import React, { FunctionComponent, useState } from 'react';
import { Form, Input, Label, Button, Icon } from 'semantic-ui-react';
import { ILoginMessage, IJankenResult } from '../../model/messages';
import style from './Janken.module.scss';

type ComponentProps = {
  currentUser: string;
  currentPlayers: ILoginMessage;
  jankenResults: IJankenResult | null;
  janken: (option: string, room: string) => void;
  onSubmit: (username: string, room: string) => void;
  moveToStage: () => void;
  againGame: (room: string) => void;
};

export const Janken: FunctionComponent<ComponentProps> = (props): JSX.Element => {
  const { currentUser, currentPlayers, jankenResults, janken, onSubmit, moveToStage, againGame } = props;
  const [userName, setUserName] = useState<string>('');
  const [room, setRoom] = useState<string>('');
  const getIcon = (result: string): JSX.Element | undefined => {
    switch (result) {
      case 'rock':
        return (<Icon size={'huge'} name='hand rock outline' color={'pink'} />);
      case 'paper':
        return (<Icon size={'huge'} name='hand paper outline' color={'pink'} />);
      case 'scissors':
        return (<Icon size={'huge'} name='hand scissors outline' color={'pink'} />);
      default:
    }
  }
  const renderButton = (): JSX.Element => {
    if (jankenResults && jankenResults.playerOneOption === jankenResults.playerTwoOption) {
      return (
      <Button
        color='pink'
        size='large'
        onClick={(): void => againGame(room)}
      >
        Again
      </Button>
      );
    } else {
      /*
      return (
      <Button
        color='pink'
        size='large'
        onClick={moveToStage}
        >
        Stages
      </Button>
      );
      */
      return (<></>);
    }
  }
  if (currentPlayers.playerOne === '' || currentPlayers.playerTwo === '') {
    if (currentUser === '') {
      return (
        <div className={style.flexCenter}>
          <Form className={style.loginForm}>
            <Form.Field>
              <Label>
                Sheep Name
              </Label>
              <Input
                value={userName}
                loading={false}
                onChange={(e): void => setUserName(e.target.value)}
              />
              <Label>
                Room Name
              </Label>
              <Input
                value={room}
                loading={false}
                onChange={(e): void => setRoom(e.target.value)}
              />
            </Form.Field>
            <Button
              disabled={room.trim() === '' || userName.trim() === ''}
              onClick={(): void => onSubmit(userName, room)}
            >
              Login
            </Button>
          </Form>
        </div>
      );

    }
    return (<></>);

  } else {
    if (jankenResults === null) {
      if (currentUser !== '') {
        return (
          <div className={style.flexCenter}>
            <Form className={style.jankenForm}>
            <Button.Group>
              <Button
                color='pink'
                size='huge'
                onClick={(): void => janken('rock', room)}
              >
                <Icon  name='hand rock outline' />
              </Button>
              <Button.Or />
              <Button
                color='pink'
                size='huge'
                onClick={(): void => janken('scissors', room)}
              >
              <Icon  name='hand scissors outline' />
              </Button>
              <Button.Or />
              <Button
                color='pink'
                size='huge'
                onClick={(): void => janken('paper', room)}
              >
              <Icon  name='hand paper outline' />
              </Button>
            </Button.Group>
            </Form>
          </div>
        );

      }
      return (<></>);
    } else {
      // display result and next button
      return (
      <div className={style.flexCenter}>
        <div className={style.jankenResult}>
          <div className={style.playerOne}>
            <div className={style.playerOneName}>
              {jankenResults.playerOne}
            </div>
            <div className={style.playerOneJankenResult}>
              {getIcon(jankenResults.playerOneOption)}
            </div>
          </div>
          <div className={style.playerTwo}>
            <div className={style.playerTwoName}>
              {jankenResults.playerTwo}
            </div>
            <div className={style.playerTwoJankenResult}>
              {getIcon(jankenResults.playerTwoOption)}
            </div>
          </div>
        </div>
        <div className={style.displayButtons}>
          {renderButton()}
        </div>
      </div>);
    }
  }
};
