import { useApolloClient } from "@apollo/client";
import { createRouterComponent } from "@curi/react-dom";
import { createRouter, announce } from "@curi/router";
import { browser } from "@hickory/browser";
import { FC, useEffect, useState } from "react";
import routes from "../../routes";
import { LinearProgress } from "@mui/material";

const Component: FC = ({ children }) => {
  const client = useApolloClient();
  const [body, setBody] = useState<any>(null);

  useEffect(() => {
    const router = createRouter(browser, routes, {
      sideEffects: [
        announce(({ response }) => {
          return `Navigated to ${response.location.pathname}`;
        }),
      ],
      external: { client },
    });
    const Router = createRouterComponent(router);
    router.once(() => {
      setBody(<Router>{children}</Router>);
    });
  }, [setBody, client, children]);

  return body ?? <LinearProgress />;
};

export default Component;