import NoSsrHandler from "@/core/components/NoSsrHandler";
import { createEmotionCacheRtl } from "@/core/utils/createEmotionCache";
import themeRtl from "@/core/utils/theme-rtl";
import { CacheProvider } from "@emotion/react";
import { GlobalStyles } from "@mui/material";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import Head from "next/head";

const clientSideEmotionCacheRtl = createEmotionCacheRtl();

const MuiLayout = ({ children, isBot }) => {
    const emotionCache = clientSideEmotionCacheRtl;
    const theme = themeRtl;

    return (
        <NoSsrHandler isBot={isBot}>
            <CacheProvider value={emotionCache}>
                <Head>
                    <meta name="viewport" content="initial-scale=1, width=device-width" />
                </Head>
                <ThemeProvider theme={theme}>
                    <GlobalStyles
                        styles={{
                            "*": {
                                scrollbarWidth: "thin",
                                scrollbarColor: `${theme.palette.primary.light}80 transparent`,
                            },
                            "*&::-webkit-scrollbar": {
                                width: "4px",
                            },
                            "*&::-webkit-scrollbar-track": {
                                boxShadow: "inset 0 0 5px #fff",
                                borderRadius: "4px",
                            },
                            "*&::-webkit-scrollbar-thumb": {
                                background: `${theme.palette.primary.light}80`,
                                borderRadius: "4px",
                            },
                            " input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button ":
                            {
                                "-webkit-appearance": "none",
                                margin: 0,
                            },
                            " input[type='number']": {
                                "-moz-appearance": "textfield",
                            },
                            body: {
                                width: "100vw",
                                height: "100vh",
                            },
                            "#__next": {
                                width: "100%",
                                height: "100%",
                            },
                        }}
                    />

                    <CssBaseline />
                    {children}
                </ThemeProvider>
            </CacheProvider>
        </NoSsrHandler>
    );
};

export default MuiLayout;
