'use client';
import React, {ReactNode, useEffect, useMemo, useState} from 'react';
import {Provider} from "react-redux";
import {AppStore, createStore} from "@/lib/store/store";
import {useRouter} from "next/navigation";
import {createUser} from "@/lib/store/features/UserSlice";
import Sidebar from "@/components/AuthLayouts/Sidebar";
import Topbar from "@/components/AuthLayouts/Topbar";
interface Props {
    children:ReactNode;
    user:{data?:{
        name:string;
        email:string;
        address:string;
        phone:string;
        avatar:string;
        permissions:string;
        role:string;
        };
        code:number;
        message:string
        success:boolean
    };
    deleteCookies:()=>Promise<void>;
    submitLogout:()=>Promise<{success:boolean, message:string}>;
}
function MainLayout({children, user, deleteCookies, submitLogout}:Props) {
    const [sidebar, setSidebar] = useState(false);
    const store = useMemo<AppStore>(() => createStore(), []);
    const userData = user.data ?? null;
    const router = useRouter();
    const logout = async () => {
        deleteCookies();
    }
    useEffect(() => {
        if (user?.code === 401) {
            logout();
            router.push('/unauthorize');
        }
    }, [user, logout, router]);

    useEffect(() => {
        if (!userData) return;
        store.dispatch(
            createUser({
                name: userData.name,
                email: userData.email,
                address: userData.address,
                phone: userData.phone,
                avatar: userData.avatar,
                permissions: JSON.parse(userData.permissions),
                role: userData.role,
            })
        );
    }, [userData, store]);
    return (
        <Provider store={store}>
            <div className="flex">
                <Sidebar sidebar={sidebar} />
                <div
                    className={`fixed top-0 left-0 w-full h-full bg-black/50 z-40 md:hidden ${sidebar ? 'hidden' : 'block'}`}
                    onClick={() => {
                        setSidebar(true)
                    }}>
                </div>
                <div
                    className={`transition-all duration-300 min-h-screen max-h-screen overflow-y-auto custom-scrollbar bg-gray-200 dark:bg-gray-950   ${sidebar ? 'w-full' : 'w-full md:w-[calc(100%-256px)] md:ml-64'}`}>
                    <Topbar submitLogout={submitLogout} sidebar={sidebar} setSidebar={setSidebar}/>
                    {children}
                </div>
            </div>
        </Provider>
    );
}

export default MainLayout;