import {Outlet} from "@tanstack/react-router";
import {useEffect} from "react";
import {useSelector} from "react-redux";
import {RootState} from "../../redux/store.ts";
import {OpenAPI} from "../../client";
import PageWrapper from "../PageWrapper/PageWrapper.tsx";
import {LoadingOverlay} from "@mantine/core";

const RootPage = () => {
    const authState = useSelector((state: RootState) => state.auth);
    const uiState = useSelector((state: RootState) => state.ui);
    const rewriteLocalStorage = () => {
        const jsonData = JSON.stringify(authState);
        localStorage.setItem('authState', jsonData);
    }
    const setOpenApiToken = () => {
        OpenAPI.TOKEN = authState.accessToken;
    }
    useEffect(() => {
        rewriteLocalStorage();
        setOpenApiToken();
    }, [authState]);

    return (
        <>
            <LoadingOverlay visible={uiState.isLoading}/>
            <PageWrapper>
                <Outlet/>
            </PageWrapper>

        </>
    )
}

export default RootPage;