import React from 'react';
import Challenge from '../../icons/Challenge';
import Formation from '../../icons/Formation';
import Trivial from '../../icons/Trivial';
import Closure from '../../icons/Closure';
import { Phases } from '../../../model/common';
import { User } from '../../../model/user';
import { Ring } from '../../../model/rings';
import ClinicCase from '../../icons/ClinicCase';
import Event from '../../icons/Event';

interface RingDescriptionProps {
  ring: Ring;
  user: User;
  show?: string;
}

const RingDescription: React.FC<RingDescriptionProps> = ({
  ring,
  user,
  show,
}) => {
  const isLastRing = ring.order === 5;
  const ringScore =
    user.team?.ringScores.find((sc) => (sc.ring as Ring).id === ring.id)
      ?.score || 0;

  const phase =
    user.answers?.find((ans) => ans.ring.id === ring.id)?.phase || 0;
  return (
    <div className={`ringDescription ${show}`}>
      <p className="currentRing">{`Anillo ${ring.order} | Duración aprox. ${`${
        ring.duration
      } ${ring.duration === 1 ? 'hora' : 'horas'}`}`}</p>
      <div className="phasesWrapper">
        <h3>{ring.title}</h3>
        <div className="phases">
          <div className={`phaseItem ${phase > 0 ? 'done' : ''}`}>
            <Formation size="medium" />
            <p>{Phases.One}</p>
          </div>
          <div className={`phaseItem ${phase > 1 ? 'done' : ''}`}>
            <Trivial size="medium" />
            <p>{Phases.Two}</p>
          </div>
          <div className={`phaseItem ${phase > 2 ? 'done' : ''}`}>
            {isLastRing ? (
              <ClinicCase size="medium" />
            ) : (
              <Challenge size="medium" />
            )}
            <p>{isLastRing ? Phases.Clinic : Phases.Three}</p>
          </div>
          <div className={`phaseItem ${phase > 3 ? 'done' : ''}`}>
            {isLastRing ? <Event size="medium" /> : <Closure size="medium" />}
            <p>{isLastRing ? Phases.Event : Phases.Four}</p>
          </div>
        </div>
      </div>
      <div className="currentPoints">
        <p className="title">Puntuación actual anillo</p>
        <p className="content">
          {ringScore}
          <span>pts</span>
        </p>
      </div>
    </div>
  );
};

export default RingDescription;