import React, {useState, useEffect} from 'react';

export const LoadingTeamsForm = (): JSX.Element => {
  const [user, setUser] = useState([]);
   useEffect(() => {
    fetch('/api/loadingLegisteredCommands', { method: 'POST'})
    .then(res => res.json())
    .then(json => setUser(json))
  },[1]);

  const flatten = (arr) => {
    const arrOfNum = [];
    arr.split(',').forEach(str => {
      arrOfNum.push(Number(str));
    });

    return Math.min(...arrOfNum);
  }

  return (
    <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
      <div className="px-4 sm:px-2 m-4 block">
        <h3 className="text-lg font-medium leading-6">Зарегистрированные команды</h3>
      </div>
      <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
          <tr>
            <th scope="col" className="px-6 py-3">
              Название команды
            </th>
            <th scope="col" className="px-6 py-3">
              ФИО тренера
            </th>
            <th scope="col" className="px-6 py-3">
              Учебное заведение
            </th>
            <th scope="col" className="px-6 py-3">
              ФИО участников
            </th>
            <th scope="col" className="px-6 py-3">
              Возрастная группа
            </th>
          </tr>
        </thead>
        <tbody>
          {user.map((rows, count) => (
            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700" key={count}>
              <th scope="row" className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                {rows.team_name}
              </th>
              <td className="px-6 py-4">
                {rows.name_team_coach}
              </td>
              <td className="px-6 py-4">
                {rows.training_institution_team}
              </td>
              <td className="px-6 py-4">
                {rows.name_first_participant +', ' + rows.name_second_participant + ',  ' + rows.name_third_party}
              </td>
              <td className="px-6 py-4">
                {
                  flatten(rows.class)
                }
              </td>
            </tr>
          ) )}
        </tbody>
      </table>
    </div>
  );
};

export default LoadingTeamsForm;