import { ForbiddenDialog } from './ForbiddenDialog';
import { UnauthorizedDialog } from './UnauthorizedDialog';
import { ServerErrorDialog } from './ServerError';
import { CustomErrorDialog } from './CustomError';

export type ApiError = {
  status: number;
  message?: string;
  uuid?: string;
};

export type ErrorDialogsProps = {
  apiError: ApiError | null;
  setApiError: (error: ApiError | null) => void;
};

export const ErrorDialogs = ({ apiError, setApiError }: ErrorDialogsProps) => {
  if (window.location.pathname.startsWith('/auth')) return null;
  if (!apiError) return null;

  const { status } = apiError;

  return (
    <>
      {status === 401 && <UnauthorizedDialog apiError={apiError} setApiError={setApiError} />}
      {status === 403 && <ForbiddenDialog apiError={apiError} setApiError={setApiError} />}
      {status >= 500 && status < 511 && <ServerErrorDialog apiError={apiError} setApiError={setApiError} />}
      {status >= 511 && <CustomErrorDialog apiError={apiError} setApiError={setApiError} />}
    </>
  );
};
