import { useIsLoggedIn } from "@/lib/hooks";
import React from "react";
import { Navigate } from "react-router-dom";

type ProctectRouteProps = {
  children?: React.ReactNode;
};

export const ProtectedRoute = ({ children }: ProctectRouteProps) => {
  const { isSuccess, data: { authenticated, redirectTo } = {} } = useIsLoggedIn();
  /*const { data: profile, ...profileStatus } = useGetProfile();

  const { i18n } = useTranslation();
  const [langCode, setLangCode] = useState(i18n.language);

  if (i18n.language !== langCode) {
    i18n.changeLanguage(langCode);
  }

  useEffect(() => {
    if (profileStatus.isSuccess && profile && langCode !== profile.lang_code) {
      setLangCode(profile.lang_code);
    }
  }, [profile, profileStatus, i18n]);*/

  /*if (isPending) {
    return null;
  }*/

  if (isSuccess && !authenticated) {
    // Redirect them to the /login page, but save the current location they were
    // trying to go to when they were redirected. This allows us to send them
    // along to that page after they login, which is a nicer user experience
    // than dropping them off on the home page.
    return <Navigate to={redirectTo ?? "/login"} />;
  }

  return <>{children ?? null}</>;
};
