import React, {useEffect, useState} from 'react';
import Layout from '../components/Layout';
import RegistrationForm from '../components/RegistrationForm';
import LoadingTeamsForm from '../components/LoadingTeamsForm';
import { useSelector } from 'react-redux';
import { useAppDispatch } from '../redux/store';
import { fetchUser, selectUserData } from '../redux/user';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export const Registration = (): JSX.Element => {
  const dispatch = useAppDispatch();
  const [UserAdd, setUserAdd] = useState(0);

  const UpdateUser = () => {
    setUserAdd(UserAdd+1);
    toast("Wow so easy !");
  }
  useEffect(() => {
    dispatch( fetchUser() );
  }, [UserAdd]);

  const { user_items, user_status } = useSelector(selectUserData);
  const User = user_items.map((obj, index) => <LoadingTeamsForm key={index} {...obj} />);
  return (
    <Layout
      customMeta={{
        title: 'Регистрация',
      }}
    >
      <RegistrationForm updateData={UpdateUser}/>
      <ToastContainer />
      <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 }
          </tbody>
        </table>
      </div>
    </Layout>
  );
};

export default Registration;