import Stack from '@material-hu/mui/Stack';

import { MenuItems } from 'src/pages/dashboard/performance/types';

import CalibrationList from '../../components/Calibration/CalibrationList';
import { usePerformanceReview } from '../../PerformanceReviewContext';

import Review from './Review';
import ReviewResults from './ReviewResults';
import ShareResults from './ShareResults';
import TeamReviews from './TeamReviews';

const ReviewContent = () => {
  const { menuSelected } = usePerformanceReview();

  return (
    <Stack
      sx={{
        alignItems: 'center',
        alignContent: 'center',
        flex: 1,
        minWidth: 0,
        width: '100%',
        maxWidth: '100%',
      }}
    >
      {menuSelected === MenuItems.COMPLETE_REVIEW && <Review />}
      {menuSelected === MenuItems.TEAM_PROGRESS && <TeamReviews />}
      {menuSelected === MenuItems.CALIBRATION && <CalibrationList />}
      {menuSelected === MenuItems.MY_RESULTS && <ReviewResults />}
      {menuSelected === MenuItems.SHARE_RESULTS && <ShareResults />}
    </Stack>
  );
};

export default ReviewContent;