import { tr } from 'date-fns/locale';
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 (
        <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>
  );
};

export default LoadingTeamsForm;
