import React from 'react';
import Coin from '../../common/Coin';
import RoundedLink from '../../common/RoundedLink';
import ArrowLeft from '../../icons/ArrowLeft';
import { Phases } from '../../../model/common';
import Closure from '../../icons/Closure';
import ArrowRight from '../../icons/ArrowRight';
import { Ring } from '../../../model/rings';
import Formation from '../../icons/Formation';
import Challenge from '../../icons/Challenge';
import TrivialFive from '../../icons/TrivialFive';
import ClinicCase from '../../icons/ClinicCase';
import Event from '../../icons/Event';

interface ModalProps {
  ring: Ring;
  points: number;
  phase: Phases;
  teamMembers: number;
  totalScore: number;
}

const getIcon = (phase: Phases): JSX.Element => {
  switch (phase) {
    case Phases.One: {
      return <Formation />;
    }
    case Phases.Two: {
      return <TrivialFive />;
    }
    case Phases.Three: {
      return <Challenge />;
    }
    case Phases.Four: {
      return <Closure />;
    }
    case Phases.Clinic: {
      return <ClinicCase />;
    }
    case Phases.Event: {
      return <Event />;
    }
    default: {
      return <Closure />;
    }
  }
};

const EndOfPhase: React.FC<ModalProps> = ({
  ring,
  points,
  phase,
  teamMembers,
  totalScore,
}) => (
  <div className="endOfPhase">
    <div className="content">
      <div className="left">
        <img alt="Chica celebrando" src="/img/animated/anim4.gif" />
      </div>
      <div className="center">
        <div className="top">
          <div className="wrapper">
            <div className="currentRing">
              <p className="ring">{`Anillo ${ring.order}`}</p>
              <p className="name">{ring.title}</p>
            </div>
            <div className="phase">
              <p>{phase}</p>
              {getIcon(phase)}
            </div>
          </div>
          <span className="divider" />
        </div>
        <div className="middle">
          <div className="text">
            <p className="completed">Completado</p>
            <span className="divider" />
            <p className="congratulations">¡Enhorabuena!</p>
          </div>
          <div className="punctuation">
            <div className="points">
              <Coin size="small" />
              <p>
                X
                <span className="obtainedPoints">
                  {(points / teamMembers).toFixed(2).replace('.', ',')}
                </span>
                <span className="pts">pts</span>
              </p>
            </div>
            <div className="currentPointsWrapper">
              <p className="title">Puntuación actual</p>
              <p className="currentPoints">
                {totalScore ? totalScore.toString().replace('.', ',') : '0,00'}
                <span>pts</span>
              </p>
            </div>
          </div>
          <span className="divider" />
        </div>
        <div className="bottom">
          <RoundedLink
            title="Inicio"
            leftIcon={<ArrowLeft />}
            route="/"
            className="grey"
            size="small"
          />
          <RoundedLink
            title="Siguiente"
            size="small"
            rightIcon={<ArrowRight />}
            route={`/ring/${ring.id}`}
          />
        </div>
      </div>
      <div className="right">
        <img alt="Chico celebrando" src="/img/animated/anim3.gif" />
      </div>
      <div className="confetti">
        <img alt="Confetti" src="/img/confetti.svg" className="desktop" />
        <img alt="Confetti" src="/img/confetti-mobile.svg" className="mobile" />
      </div>
    </div>
    <span className="veil" />
  </div>
);

export default EndOfPhase;