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 { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css

export const Registration = (): JSX.Element => {
  const dispatch = useAppDispatch();
  const [UserAdd, setUserAdd] = useState(0);
  const UpdateUser = () => {
    setUserAdd(UserAdd+1);
    confirmAlert({
      customUI: ({ onClose }) => {
        return (
          <div className='custom-ui'>
            <h1>Are you sure?</h1>
            <p>You want to delete this file?</p>
            <button onClick={onClose}>No</button>
            <button
              onClick={() => {
                onClose();
              }}
            >
              Yes, Delete it!
            </button>
          </div>
        );
      }
    });
  }
  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}/>
      <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;