import React, { FunctionComponent } from 'react';
import { Button } from 'semantic-ui-react';
import style from './Stage.module.scss';

type ComponentProps = {
  stages: string[];
  currentIndex: number;
  previousIndex: () => void;
  nextIndex: () => void;
  exitGame: () => void;
};

export const Stage: FunctionComponent<ComponentProps> = (props): JSX.Element => {
  const { stages, currentIndex, previousIndex, nextIndex, exitGame } = props;
  const previousButton = (): JSX.Element | undefined => {
    if (currentIndex > 0) {
      return (
        <Button
          color='pink'
          size='large'
          onClick={previousIndex}
        >
          Previous
        </Button>
      );
    }
  };
  const nextButton = (): JSX.Element | undefined => {
    if (currentIndex < (stages.length -1)) {
      return (
        <Button
          color='pink'
          size='large'
          onClick={nextIndex}
        >
          Next
        </Button>
      );
    }
  };
  const exitButton = (): JSX.Element | undefined => {
    if (currentIndex === (stages.length - 1)) {
      return (
        <Button
          color='pink'
          size='large'
          onClick={exitGame}
        >
          Exit
        </Button>
      );
    }
  };
  const printStageName = (): string => {
    switch (stages[currentIndex]) {
      case 'cementery': {
        return 'Underground Cementery ~地下墓地~';
      }
      case 'prison': {
        return 'Prison of Despair ~罪人監獄~';
      }
      case 'torture': {
        return 'Torture Chamber ~拷問刑場~';
      }
      case 'inquisition': {
        return 'Inquisition ~審問法廷~';
      }
      case 'quadrangle': {
        return 'Quadrangle ~暴風の中庭~';
      }
      case 'clock': {
        return 'Clock Tower ~時計塔~';
      }
      case 'spiral': {
        return 'Spiral Corridor ~祭壇への路~';
      }
      case 'empireo': {
        return 'The Empireo ~天上~';
      }
      case 'cathedral': {
        return 'The Cathedral ~大聖堂~';
      }
      case 'close': {
        return 'Close Encounter ~新天地~';
      }
      case 'arrange': {
        return 'Arrange ~アレンジ~';
      }
      default:
        return '';
    }
  };
  return (
    <div className={style.stageScreen}>
      <div className={style.topPage}>
        <div className={style.previousButton}>
          {previousButton()}
        </div>
        <div className={style.stageName}>
          {printStageName()} {`(${currentIndex + 1}/${stages.length})`}
        </div>
        <div className={style.nextButton}>
          {nextButton()}
        </div>
      </div>
      <div className={style[stages[currentIndex]]}></div>
      <div className={style.exitButton}>
        {exitButton()}
      </div>
    </div>
  );

};
