"use client"

import { useMounted } from "@/hooks/useMounted";
import useResponsive from "@/hooks/useResponsive";
import { LAYOUT_SETTING } from "@/lib/appConstant";
import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
import { getBodySetting, getLayoutViewPage, getPageMargin } from "@/lib/redux/features/serviceAdmin";
import { makeStyles } from 'tss-react/mui';
import { useEffect } from "react";
import { setShowBanner, setShowFooter, setShowHeader } from "@/lib/redux/features/layout";

type PropsType = {
    children: React.ReactNode;
    sideBar?: boolean;
    header?: boolean;
    footer?: boolean;
    banner?: boolean;
    bodyMegreLayout?: boolean;
};

type MakeStylesType = {
    below768?: boolean;
    bodySetting: any;
    pageMargin: any;
    pathname: any;
}

const useStyle = makeStyles<MakeStylesType>()((theme, { bodySetting, pageMargin, pathname, below768 }) => {
    return (
    {
        body: {
            backgroundColor: `${bodySetting.backgroundColor}!important`,
            display: 'flex',
            flexDirection: 'row',
            flex: '1 0 0px',
            fontSize: below768 ? '12px' : '16px',
            '& em': {
                // color: 'red'
            }
        },
        contain: {
            flex: '1 0 0px'
        },
        bodyLayout3: {
            marginLeft: below768 ? pathname.includes('profile') ? '10px' : '5px' : `${pageMargin.left}px`,
            marginRight: below768 ? pathname.includes('profile') ? '10px' : '5px' : `${pageMargin.right}px`
        }
    }
    );
});
export default function DefaultAuthLayout(props: PropsType) {
    const { children, header, footer, banner, bodyMegreLayout } = props;
    
    const mounted = useMounted();
    const { below768 } = useResponsive();
    const dispatch = useAppDispatch();

    const bodySetting = useAppSelector(getBodySetting);
    const pageMargin = useAppSelector(getPageMargin);
    const layoutViewPage = useAppSelector(getLayoutViewPage);
    // const isLoggedIn = !!useAppSelector(getIsAuthenticated);
    // const authInfo = useAppSelector(getAuthInfo);

    const isMegreLayout = layoutViewPage === LAYOUT_SETTING.HOME_LAYOUT_AND_SEARCH_LAYOUT.id;
    


    const { classes } = useStyle({ below768, bodySetting, pageMargin, pathname: (mounted ? window.location.pathname : '') });

    useEffect(() => {
        dispatch(setShowBanner(!!banner));
        dispatch(setShowHeader(!!header));
        dispatch(setShowFooter(!!footer));
    }, []);

    return (
        <div role="main" className={`${classes.body} body-full`}>
            {
                isMegreLayout && bodyMegreLayout
                ? <div className={`${isMegreLayout ? classes.bodyLayout3 : classes.body}`}>
                    {children}
                </div>
                : <>
                    {children}
                </>
            }
        </div>
    );
}