import { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { useAppDispatch } from "../redux/hooks";
import { setToken } from "../slices/loginSlice/loginSlice";
import { decodeToken, getDecryptedToken } from "../auth/authHandler";

export function withAppWrapper(WrappedComponent: any) {
  return function InnerCompo() {
    const [load, setLoad] = useState(false);

    const dispatch = useAppDispatch();
    const navigate = useNavigate();

    useEffect(() => {
      const accessToken = getDecryptedToken();
      if (accessToken) {
        dispatch(setToken(accessToken));
        const user = decodeToken(accessToken);
        if (!user) {
          navigate("/");
        }
      }
    }, [dispatch, navigate]);

    return load ? <h1>load</h1> : <WrappedComponent />;
  };
}