import "@mantine/core/styles.css";
import "mantine-datatable/styles.layer.css";
import "@mantine/notifications/styles.css";
import "@mantine/dates/styles.css";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import { ReactNode } from "react";
import {
    AppShell,
    ColorSchemeScript,
    mantineHtmlProps,
    MantineProvider,
} from "@mantine/core";
import { theme } from "@/theme";
import "@/app/global.css";
import { ModalsProvider } from "@mantine/modals";
import { Notifications } from "@mantine/notifications";
import AppShellFooterWrapper from "@/components/layout/AppShellWrappers/AppShellFooterWrapper";
import AppShellMainWrapper from "@/components/layout/AppShellWrappers/AppShellMainWrapper";
import AppShellNavbarWrapper from "@/components/layout/AppShellWrappers/AppShellNavbarWrapper";
import Footer from "@/components/layout/Footer/Footer";
import Navbar from "@/components/layout/Navbar/Navbar";
import { DrawersContextProvider } from "@/drawers/DrawersContext";
import { modals } from "@/modals/modals";
import { ReactQueryProvider } from "@/providers/ReactQueryProvider";
import ReduxProvider from "@/providers/ReduxProvider";

export const metadata = {
    title: "CRM LogiDex",
    description: "CRM LogiDex",
};

declare module "@mantine/modals" {
    export interface MantineModalsOverride {
        modals: typeof modals;
    }
}

type Props = {
    children: ReactNode;
};

export default function RootLayout({ children }: Props) {
    return (
        <html
            lang="ru"
            {...mantineHtmlProps}>
            <head>
                <ColorSchemeScript defaultColorScheme={"auto"} />
                <link
                    rel="shortcut icon"
                    href="/favicon.svg"
                />
                <meta
                    name="viewport"
                    content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
                />
                <title />
            </head>
            <body>
                <MantineProvider
                    theme={theme}
                    defaultColorScheme={"auto"}>
                    <ReactQueryProvider>
                        <ReduxProvider>
                            <ModalsProvider
                                labels={{ confirm: "Да", cancel: "Нет" }}
                                modals={modals}>
                                <DrawersContextProvider>
                                    <AppShell
                                        layout={"alt"}
                                        withBorder={false}
                                        navbar={{
                                            width: 145,
                                            breakpoint: "sm",
                                            collapsed: {
                                                desktop: false,
                                                mobile: true,
                                            },
                                        }}>
                                        <AppShellNavbarWrapper>
                                            <Navbar />
                                        </AppShellNavbarWrapper>
                                        <AppShellMainWrapper>
                                            {children}
                                        </AppShellMainWrapper>
                                        <AppShellFooterWrapper>
                                            <Footer />
                                        </AppShellFooterWrapper>
                                    </AppShell>
                                </DrawersContextProvider>
                            </ModalsProvider>
                        </ReduxProvider>
                        <Notifications position="bottom-right" />
                    </ReactQueryProvider>
                </MantineProvider>
            </body>
        </html>
    );
}
