import "@mantine/core/styles.css";
import "@mantine/notifications/styles.css";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import { ReactNode } from "react";
import {
    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 { 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}>
                                {children}
                            </ModalsProvider>
                        </ReduxProvider>
                        <Notifications position="bottom-right" />
                    </ReactQueryProvider>
                </MantineProvider>
            </body>
        </html>
    );
}
