import ErrorWrapper from "./errorWrapper";
import bg403 from "./images/bg-403.png";
import bg500 from "./images/bg-500.png";
import bg503 from "./images/bg-503.png";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const Error404 = ({ btnText, fallbackPath, isDashboard }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <ErrorWrapper
      fallbackPath={fallbackPath}
      btnText={isDashboard ? findText("Go to dashboard") : btnText}
      isDashboard={isDashboard}
      subTitle={findText("Page not found")}
      message={findText(
        "Seems we can't find the page you are looking for. Let's get you back home.",
      )}
    />
  );
};
const Error403 = ({ btnText, fallbackPath, isDashboard }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <ErrorWrapper
      subTitle={findText(
        "Sorry, you don’t have permission to access this page.",
      )}
      message={findText(
        "If you believe this is a mistake, please contact the site administrator or check if you have the correct login credentials.",
      )}
      bgSrc={bg403}
      fallbackPath={fallbackPath}
      btnText={isDashboard ? findText("Go to dashboard") : btnText}
      isDashboard={isDashboard}
    />
  );
};
const Error500 = ({ btnText, fallbackPath, isDashboard }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <ErrorWrapper
      subTitle={findText("Something went wrong")}
      message={findText(
        "We’re so sorry about that! Our tech team is already on the case. Please try again later.",
      )}
      bgSrc={bg500}
      fallbackPath={fallbackPath}
      btnText={isDashboard ? findText("Go to dashboard") : btnText}
      isDashboard={isDashboard}
    />
  );
};
const Error503 = ({ btnText, fallbackPath, isDashboard }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <ErrorWrapper
      subTitle=""
      message={findText(
        "It'll be back up and running in a jiffy. Try again later.",
      )}
      title={findText("Our servers are temporarily busy.")}
      bgSrc={bg503}
      fallbackPath={fallbackPath}
      btnText={isDashboard ? findText("Go to dashboard") : btnText}
      isDashboard={isDashboard}
    />
  );
};
function ErrorBoundary({
  routeError,
  isRouteErrorResponse,
  fallbackPath,
  btnText,
  isDashboard,
}) {
  if (isRouteErrorResponse?.(routeError)) {
    if (error.status === 404)
      return (
        <Error404
          fallbackPath={fallbackPath}
          btnText={isDashboard ? findText("Go to dashboard") : btnText}
          isDashboard={isDashboard}
        />
      );
    if (error.status === 403)
      return (
        <Error403
          fallbackPath={fallbackPath}
          btnText={btnText}
          isDashboard={isDashboard}
        />
      );
    if (error.status === 500)
      return (
        <Error500
          fallbackPath={fallbackPath}
          btnText={btnText}
          isDashboard={isDashboard}
        />
      );
    if (error.status === 503)
      return (
        <Error503
          fallbackPath={fallbackPath}
          btnText={btnText}
          isDashboard={isDashboard}
        />
      );
    return (
      <Error500
        fallbackPath={fallbackPath}
        btnText={btnText}
        isDashboard={isDashboard}
      />
    );
  }
  if (error instanceof Error)
    return (
      <Error500
        fallbackPath={fallbackPath}
        btnText={btnText}
        isDashboard={isDashboard}
      />
    );
  return (
    <Error500
      fallbackPath={fallbackPath}
      btnText={btnText}
      isDashboard={isDashboard}
    />
  );
}
function ErrorComponent({ fallbackPath, btnText, isDashboard = false }) {
  const params = new URLSearchParams(window.location.search);
  const errorParam = params.get("error-status");
  if (errorParam === "_403_")
    return (
      <Error403
        fallbackPath={fallbackPath}
        btnText={btnText}
        isDashboard={isDashboard}
      />
    );
  if (errorParam === "_500_")
    return (
      <Error500
        fallbackPath={fallbackPath}
        btnText={btnText}
        isDashboard={isDashboard}
      />
    );
  if (errorParam === "_503_")
    return (
      <Error503
        fallbackPath={fallbackPath}
        btnText={btnText}
        isDashboard={isDashboard}
      />
    );
  return (
    <Error404
      fallbackPath={fallbackPath}
      btnText={btnText}
      isDashboard={isDashboard}
    />
  );
}
const getErrorFeatures = () => {
  return {
    Error404,
    Error403,
    Error500,
    Error503,
    ErrorBoundary,
    ErrorComponent,
  };
};
export default getErrorFeatures;
