import Link from 'next/link';
import React, { useState } from 'react';
import { format } from 'date-fns';
import { es } from 'date-fns/locale';
import Coin from '../../common/Coin';
import RoundedLink from '../../common/RoundedLink';
import ArrowRight from '../../icons/ArrowRight';
import Challenge from '../../icons/Challenge';
import Closure from '../../icons/Closure';
import Formation from '../../icons/Formation';
import Trivial from '../../icons/Trivial';
import GoBackArrow from '../../icons/GoBackArrow';
import { Phases } from '../../../model/common';
import { RingProps } from '../../../model/components/ring';
import { Activity, Ring, Routes } from '../../../model/rings';
import PhaseItem from './PhaseItem';
import ClinicCase from '../../icons/ClinicCase';
import Event from '../../icons/Event';

const CurrentRingDetail: React.FC<RingProps> = ({ ring, user }) => {
  const {
    order,
    duration,
    title,
    description,
    challenge,
    training,
    trivial,
    closure,
    clinicCase,
  } = ring;

  const {
    answers,
    team: { ringScores },
  } = user;

  const currentScore = ringScores?.find(
    (score) => (score.ring as Ring).id === ring.id,
  )?.score;
  const phaseIndex =
    answers?.find((ans) => ans.ring.id === ring.id)?.phase || 0;

  const [currentPhase, setCurrentPhase] = useState<number>(
    Math.min(phaseIndex, 3),
  );

  const isLastRing = ring.order === 5;

  const phases: Activity[] = [
    training.info,
    trivial.info,
    isLastRing ? clinicCase.info : challenge.info,
    closure.info,
  ];
  const phase = phases[currentPhase];

  let disabled = false;

  if (isLastRing && currentPhase > 2) {
    const startDate = new Date(phase.startDate);
    const endDate = new Date(phase.endDate);
    const today = new Date();

    disabled = startDate >= today || endDate <= today;
  }

  const {
    description: activityDescription,
    title: activityTitle,
    startDate,
    endDate,
    value,
  } = phase;

  const startDateObject = new Date(startDate);
  const endDateObject = new Date(endDate);

  let route = Routes[currentPhase];
  if (isLastRing && currentPhase === 2) {
    // eslint-disable-next-line prefer-destructuring
    route = Routes[4];
  }
  if (isLastRing && currentPhase === 3) {
    // eslint-disable-next-line prefer-destructuring
    route = Routes[5];
  }
  return (
    <article className="currentRingWrapper">
      <div className="infoHolder">
        <div className="top">
          <Link href="/">
            <a href="/" className="goBackLink" title="Regresar">
              <GoBackArrow />
            </a>
          </Link>
          <div className="rings">
            <span className={`ringWrapper one${order === 1 ? ' active' : ''}`}>
              <span className="ring" />
            </span>
            <span className={`ringWrapper two${order === 2 ? ' active' : ''}`}>
              <span className="ring" />
            </span>
            <span
              className={`ringWrapper three${order === 3 ? ' active' : ''}`}
            >
              <span className="ring" />
            </span>
            <span className={`ringWrapper four${order === 4 ? ' active' : ''}`}>
              <span className="ring" />
            </span>
            <span className={`ringWrapper five${order === 5 ? ' active' : ''}`}>
              <span className="ring" />
            </span>
          </div>
        </div>
        <div className="contentWrapper">
          <div className="content left">
            <p className="currentRing">{`Anillo ${order} | Duración aprox. ${duration} hora`}</p>
            <div className="infoWrapper">
              <h1>{title}</h1>
              <div className="currentPoints">
                <p className="title">Puntuación actual anillo</p>
                <p className="content">
                  {currentScore || 0}
                  <span>pts</span>
                </p>
              </div>
            </div>
            <div className="description">
              <p>{description}</p>
            </div>
          </div>
          <div className="content right">
            <div className="phases">
              <PhaseItem
                title={Phases.One}
                onClick={(): void => setCurrentPhase(0)}
                currentPhaseNumber={phaseIndex}
                phaseNumber={0}
                icon={<Formation size="medium" />}
                points={1}
                selected={currentPhase === 0}
              />
              <PhaseItem
                title={Phases.Two}
                onClick={(): void => setCurrentPhase(1)}
                currentPhaseNumber={phaseIndex}
                phaseNumber={1}
                icon={<Trivial size="medium" />}
                points={5}
                disabled={phaseIndex !== 1}
                selected={currentPhase === 1}
              />
              <PhaseItem
                title={isLastRing ? Phases.Clinic : Phases.Three}
                onClick={(): void => setCurrentPhase(2)}
                currentPhaseNumber={phaseIndex}
                phaseNumber={2}
                icon={
                  isLastRing ? (
                    <ClinicCase size="medium" />
                  ) : (
                    <Challenge size="medium" />
                  )
                }
                points={1}
                disabled={phaseIndex !== 2}
                selected={currentPhase === 2}
              />
              <PhaseItem
                title={isLastRing ? Phases.Event : Phases.Four}
                onClick={(): void => setCurrentPhase(3)}
                currentPhaseNumber={phaseIndex}
                phaseNumber={3}
                icon={
                  isLastRing ? (
                    <Event size="medium" />
                  ) : (
                    <Closure size="medium" />
                  )
                }
                disabled={phaseIndex < 3}
                selected={currentPhase === 3}
              />
            </div>
            <span className="divider" />
            <div className={`infoWrapper${disabled ? ' noButton' : ''}`}>
              <div className="info">
                <p className="duration">{`Del ${format(
                  startDateObject,
                  "d 'de' MMMM",
                  { locale: es },
                )} al ${format(endDateObject, "d 'de' MMMM", {
                  locale: es,
                })}`}</p>
                <p className="phaseTitle">{activityTitle}</p>
                <p className="phaseContent">{activityDescription}</p>
                <div className="phasePoints">
                  <Coin size="tiny" />
                  <p>{`${value} pto${
                    value !== 1 ? 's' : ''
                  } x participante / Nº Miembros`}</p>
                </div>
              </div>
              {!disabled ? (
                <RoundedLink
                  route={`/ring/${ring.id}/${route}`}
                  rightIcon={<ArrowRight />}
                  title="Jugar"
                />
              ) : null}
            </div>
          </div>
        </div>
      </div>
    </article>
  );
};

export default CurrentRingDetail;