import React, { FC } from 'react';
import Button from '@material-ui/core/Button';
import { useRoleList } from 'hooks/useRoleList';
import { setRole } from 'api/setRole';
import { useHistory } from 'react-router-dom';
import { AuthRoutes } from 'api/routes';
import { choseRoleStyle } from './ChoseRole.style';

export const ChoseRole: FC = () => {
  const history = useHistory();
  const classes = choseRoleStyle();

  const rolesList = useRoleList();

  const choseAndForward = (role: string): void => {
    setRole(role).then(() =>
      history.push(`${AuthRoutes.dashboard}${AuthRoutes.home}`),
    );
  };

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