import React from 'react';
import { Phases } from '../../../model/common';
import Coin from '../../common/Coin';
import Challenge from '../../icons/Challenge';
import Closure from '../../icons/Closure';
import Formation from '../../icons/Formation';
import Trivial from '../../icons/Trivial';

const CommonRow: React.FC = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>
            <div>
              <Formation />
              <p className="subtitle">{Phases.One}</p>
            </div>
          </th>
          <th>
            <div>
              <Trivial />
              <p className="subtitle">{Phases.Two}</p>
            </div>
          </th>
          <th>
            <div>
              <Challenge />
              <p className="subtitle">{Phases.Three}</p>
            </div>
          </th>
          <th>
            <div>
              <Closure />
              <p className="subtitle">{Phases.Four}</p>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div>
              <div className="coins">
                <Coin size="tiny" />
              </div>
              <p>
                1 pto /<br />
                Nº miembros
                <br />
                del equipo
              </p>
            </div>
          </td>
          <td>
            <div>
              <div className="coins">
                <Coin size="tiny" />
                <Coin size="tiny" />
                <Coin size="tiny" />
                <Coin size="tiny" />
                <Coin size="tiny" />
              </div>
              <p>
                5 ptos /<br />
                Nº miembros
                <br />
                del equipo
              </p>
            </div>
          </td>
          <td>
            <div>
              <div className="coins">
                <Coin size="tiny" />
              </div>
              <p>
                1 pto /<br />
                Nº miembros
                <br />
                del equipo
              </p>
            </div>
          </td>
          <td>
            <div>
              <p>0 pts</p>
            </div>
          </td>
          <td />
        </tr>
      </tbody>
    </table>
  );
};

const PointsMobile: React.FC = () => {
  return (
    <div className="tableWrapper mobile">
      <h2>
        <Coin size="small" />
        <p className="title">Puntuación</p>
      </h2>
      <span className="divider" />
      <h3 className="title">Anillo 1</h3>
      <span className="divider" />
      <CommonRow />
      <h3 className="title">Anillo 2</h3>
      <span className="divider" />
      <CommonRow />
      <h3 className="title">Anillo 3</h3>
      <span className="divider" />
      <CommonRow />
      <h3 className="title">Anillo 4</h3>
      <span className="divider" />
      <CommonRow />
      <h3 className="title">Anillo 5</h3>
      <span className="divider" />
      <table>
        <thead>
          <tr>
            <th>
              <div>
                <Formation />
                <p className="subtitle">{Phases.One}</p>
              </div>
            </th>
            <th>
              <div>
                <Trivial />
                <p className="subtitle">{Phases.Two}</p>
              </div>
            </th>
            <th>
              <div>
                <Challenge />
                <p className="subtitle">{Phases.Three}</p>
              </div>
            </th>
            <th>
              <div>
                <Closure />
                <p className="subtitle">{Phases.Four}</p>
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  1 pto grupal /
                  <br /> Nº miembros
                  <br /> del equipo
                </p>
              </div>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                </div>
                <p>
                  5 ptos grupales /
                  <br /> Nº miembros
                  <br /> del equipo
                </p>
              </div>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  1 pto grupal
                  <br /> por el
                  <br /> caso clínico
                </p>
              </div>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  3 pts
                  <br /> si el caso clínico
                  <br /> es ganador
                </p>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <h3 className="title">Extras</h3>
      <span className="divider" />
      <table>
        <tbody>
          <tr>
            <td colSpan={2}>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  1 pto
                  <br /> por cada especialidad
                  <br /> médica en el equipo
                </p>
              </div>
            </td>
            <td colSpan={2}>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                </div>
                <p>
                  5 ptos
                  <br /> si todos los miembros
                  <br /> completan todo
                </p>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default PointsMobile;