import React, { FC, useContext, useEffect, useState } from 'react';
import Button from '@material-ui/core/Button';
import { getRoles } from 'api/getRoles';
import { setRole } from 'api/setRole';
import { useHistory } from 'react-router-dom';
import { AuthRoutes } from 'api/routes';
import { AuthContext } from 'components/Auth/AuthContext';

/**
 * Page that let's users decide role between available roles.
 * This is intended to use when a user has more than one role.
 * @returns ChoseRole component.
 */
export const ChoseRole: FC = () => {
  const history = useHistory();
  const [userRoles, setUserRoles] = useState<string[]>(['']);
  const { setIsAuth } = useContext(AuthContext);

  const choseAndForward = (role: string): void => {
    // Set role in the server.
    setRole(role);
    setIsAuth(true);
    // Push to homepage.
    history.push(`${AuthRoutes.dashboard}${AuthRoutes.home}`);
  };

  useEffect(() => {
    getRoles().then((fetchedRoles) => setUserRoles(fetchedRoles));
  }, []);

  return (
    <div data-testid="ChoseRole">
      {userRoles ? (
        userRoles.map((role) => (
          <Button
            variant="outlined"
            color="default"
            key={role}
            onClick={() => choseAndForward(role)}
          >
            {role}
          </Button>
        ))
      ) : (
        <h1>No roles were returned.</h1>
      )}
    </div>
  );
};