/**
 * @Move (?)
 * App-level guard, consumed by routes.tsx - keep near router
 */
import { type PropsWithChildren, type ReactElement } from 'react';
import { useParams } from 'react-router-dom';

import Alert from '@material-hu/components/design-system/Alert';

import useAuth from 'src/contexts/JWTContext';
import {
  type UserGrant,
  type UsersGrant,
} from 'src/pages/dashboard/Users/grants';
import useUsersGuardAccess from 'src/pages/dashboard/Users/hooks/useUsersGuardAccess';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CenteredCircularProgress from 'src/components/CircularProgress';

type Props = {
  requiredGrants?: UsersGrant[];
  requiredUserGrants?: UserGrant[];
  requireAll?: boolean;
};

const UsersGuard = ({
  children,
  requiredGrants = [],
  requiredUserGrants = [],
  requireAll = false,
}: PropsWithChildren<Props>) => {
  const { instance } = useAuth();
  const { t } = useLokaliseTranslation('backoffice_only');
  const { id } = useParams();

  const { hasAccess, isLoadingGrants } = useUsersGuardAccess({
    requiredGrants,
    requiredUserGrants,
    userId: Number(id),
    requireAll,
  });

  if (isLoadingGrants) {
    return <CenteredCircularProgress centered />;
  }

  const hasGrantRequirements =
    requiredGrants.length > 0 || requiredUserGrants.length > 0;

  if (hasGrantRequirements && !hasAccess) {
    return (
      <Alert
        severity="error"
        sx={{ m: 3 }}
        title={t('permission_guard.permission_guard')}
        description={
          <a href={`mailto:${instance?.adminEmail}`}>{instance?.adminEmail}</a>
        }
      />
    );
  }

  return children as ReactElement;
};

export default UsersGuard;