import React, { FC, useEffect, useState } from 'react';
import Button from '@material-ui/core/Button';
import { Grid, Typography, Hidden } from '@material-ui/core';
import { getRoles } from 'api/getRoles';
import { setRole } from 'api/setRole';
import { useHistory } from 'react-router-dom';
import { AuthRoutes } from 'api/routes';
import { choseRoleStyle } from './ChoseRole.style';
import { ChoseRole } from './ChoseRole';

/**
 * 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 ChoseRolePage: FC = () => {
  const classes = choseRoleStyle();

  const history = useHistory();
  const [userRoles, setUserRoles] = useState<string[]>(['']);

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

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

  return (
    <div data-testid="ChoseRole">
      <Grid container direction="column" className={classes.paddingBottom}>
        <div className={classes.root}>
          <header>
            <Grid item container className={classes.paddingBottom}>
              <Grid item xs={1} md={2} lg={2} />

              <Grid item xs={10} md={6} lg={4}>
                <Typography variant="h2" className={classes.whiteText}>
                  Choose Your
                </Typography>
                <Typography variant="h2" className={classes.whiteText}>
                  ROLE
                </Typography>
              </Grid>

              <Grid item xs={1} />
            </Grid>
          </header>
        </div>
      </Grid>

      <Grid container>
        <Grid item xs={1} lg={2} />
        <Grid item xs={10} lg={8}>
          <ChoseRole />
        </Grid>
        <Grid item xs={1} lg={2} />
      </Grid>
    </div>
  );
};