import { useState, type ReactNode } from "react";
import AppSidebarLayout from "./app/app-sidebar-layout";
import AppHeaderLayout from "./app/app-header-layout";
import AppContentLayout from "./app/app-content-layout";
import AppFooterLayout from "./app/app-footer-layout";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { motion, AnimatePresence } from "framer-motion";
import { usePage } from "@inertiajs/react";
import { ToastContainer } from "react-toastify";

const MySwal = withReactContent(Swal);

export const MySwalTheme = MySwal.mixin({
    customClass: {
        confirmButton: 'btn btn-success mx-1',
        cancelButton: 'btn btn-light mx-1',
        closeButton: 'btn btn-light mx-1',
        denyButton: 'btn btn-danger mx-1',
    },
    buttonsStyling: false,
});

interface AppLayoutProps {
    children: ReactNode;
    onToggleSidebarSize?: () => void;
}

export default ({ children, onToggleSidebarSize, ...props }: AppLayoutProps) => {
    const { url } = usePage();
    const animationKey = url.split('?')[0];
    const [isSidebarMobileOpen, setIsSidebarMobileOpen] = useState(false);

    return (
        <main className="layout" {...props}>
            <AppHeaderLayout
                setIsSidebarMobileOpen={setIsSidebarMobileOpen}
            />
            <AppSidebarLayout
                isSidebarMobileOpen={isSidebarMobileOpen}
                setIsSidebarMobileOpen={setIsSidebarMobileOpen}
                onToggleSidebarSize={onToggleSidebarSize}
            />

            <AppContentLayout>
                <AnimatePresence mode="wait">
                    <motion.div
                        key={animationKey}
                        initial={{ opacity: 0, y: 40 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: 40 }}
                        transition={{
                            duration: 0.5,
                            ease: "easeInOut",
                        }}
                        className="app-content-container"
                    >
                        {children}
                    </motion.div>
                </AnimatePresence>

                <AppFooterLayout />
            </AppContentLayout>

            <ToastContainer />
        </main>
    )
}