import { PropsWithChildren, ReactElement } from 'react';

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

import useAuth from 'src/contexts/JWTContext';
import useFeatureFlag from 'src/hooks/useFeatureFlag';
import { FeatureFlags } from 'src/types/featureFlags';
import {
  Roles,
  getPermissionsMatchingRole,
} from 'src/utils/hardcodedPermissionsByRole';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { hasAnyPermissions, UserPermissions } from 'src/utils/permissions';

type Props = {
  requiredRoles: Roles[];
  cerberusRequiredPermissions: UserPermissions[];
};

const GrupoEfeGuard = ({
  children,
  requiredRoles,
  cerberusRequiredPermissions,
}: PropsWithChildren<Props>) => {
  const { permissions, instance } = useAuth();
  const { t } = useLokaliseTranslation('backoffice_only');
  const isCerberusEnabled = useFeatureFlag(FeatureFlags.CERBERUS_ENABLED);

  const canManageCustomReports = hasAnyPermissions(
    permissions,
    cerberusRequiredPermissions,
  );

  if (
    isCerberusEnabled
      ? !canManageCustomReports
      : requiredRoles?.length &&
        !requiredRoles.includes(
          getPermissionsMatchingRole(permissions) as Roles,
        )
  ) {
    return (
      <Alert
        severity="error"
        sx={{ m: 3 }}
      >
        {t('permission_guard.permission_guard')}
        <a href={`mailto:${instance?.adminEmail}`}>{instance?.adminEmail}</a>.
      </Alert>
    );
  }

  return children as ReactElement;
};

export default GrupoEfeGuard;