import { FC, ReactNode } from "react";
import { AppShell, Flex, rem } from "@mantine/core";
import { useSelector } from "react-redux";
import { RootState } from "../../redux/store.ts";
import styles from "./PageWrapper.module.css";
import { Navbar } from "../../components/Navbar/Navbar.tsx";
import HideNavbarAffix from "../../components/HideNavbarAffix/HideNavbarAffix.tsx";

export type Props = {
    children: ReactNode;
};
const PageWrapper: FC<Props> = ({ children }) => {
    const authState = useSelector((state: RootState) => state.auth);
    const uiState = useSelector((state: RootState) => state.ui);
    const navbarNeeded = authState.isAuthorized && !authState.isGuest;

    return (
        <AppShell
            layout={"alt"}
            withBorder={false}
            navbar={
                navbarNeeded
                    ? {
                        width: "130px",
                        breakpoint: "sm",
                        collapsed: { desktop: uiState.hideNavbar, mobile: true },
                    }
                    : undefined
            }>
            <AppShell.Header>

            </AppShell.Header>
            <AppShell.Navbar>
                {navbarNeeded && (
                    <Flex
                        className={styles["main-container"]}
                        h={"100%"}
                        w={"100%"}
                        pl={rem(20)}
                        py={rem(20)}>
                        <Navbar />
                    </Flex>
                )}
            </AppShell.Navbar>
            <AppShell.Main
                style={
                    authState.isGuest
                        ? { backgroundColor: "var(--mantine-color-dark-8)" }
                        : {}
                }
                className={styles["main-container"]}>
                <div className={styles["container"]}>{children}</div>
                <HideNavbarAffix />
            </AppShell.Main>
        </AppShell>
    );
};
export default PageWrapper;
