"use client"

import AppSidebar from "@/components/core/sidebar";
import { useMounted } from "@/hooks/useMounted";
import useResponsive from "@/hooks/useResponsive";
import { LAYOUT_SETTING, SORT_FIELD_TYPE } from "@/lib/appConstant";
import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
import { getBodySetting, getCompanyDomain, getLayoutViewPage, getPageMargin, getServicePath, getViewSettings } from "@/lib/redux/features/serviceAdmin";
import { makeStyles } from 'tss-react/mui';
import { getAllSort } from "@/lib/redux/features/sort";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { getOpenSidebar, setShowBanner, setShowFooter, setShowHeader } from "@/lib/redux/features/layout";
import StorageHelper from "@/lib/storeHelper";

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

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

const useStyle = makeStyles<MakeStylesType>()((theme, { below768, isMegreLayout, bodySetting, pathname, pageMargin }) => {
    return (
    {
        body: {
            backgroundColor: `${bodySetting.backgroundColor}!important`,
            display: isMegreLayout ? '' : pathname.includes('subscription') ? 'block' : 'flex',
            flexDirection: 'row',
            flex: '1 0 0px',
            fontSize: below768 ? '12px' : '16px'
        },
        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 SearchLayout(props: PropsType) {
    const { children, sideBar, header, footer, banner, bodyMegreLayout } = props;
    const mounted = useMounted();
    const router = useRouter();
    const { below768, getBelow768 } = useResponsive();
    const dispatch = useAppDispatch();

    const isOpenSidebar = useAppSelector(getOpenSidebar);
    const servicePath = useAppSelector(getServicePath);
    const domain = useAppSelector(getCompanyDomain);
    const listSorts = useAppSelector(getAllSort);
    const viewSettings = useAppSelector(getViewSettings);
    const bodySetting = useAppSelector(getBodySetting);
    const pageMargin = useAppSelector(getPageMargin);
    const layoutViewPage = useAppSelector(getLayoutViewPage);

    const userStore = !servicePath || servicePath === '' ? domain : servicePath;
    const token = StorageHelper.getCookie(userStore);
    const isMegreLayout = layoutViewPage === LAYOUT_SETTING.HOME_LAYOUT_AND_SEARCH_LAYOUT.id;
    const isHomeLayout = layoutViewPage === LAYOUT_SETTING.HOME_LAYOUT.id;
    
    
    const { classes } = useStyle({ below768, isMegreLayout, bodySetting, pageMargin, pathname: (mounted ? window.location.pathname : '') });

    useEffect(() => {
        dispatch(setShowBanner(!!banner));
        dispatch(setShowHeader(!!header));
        dispatch(setShowFooter(!!footer));
    }, []);
    useEffect(() => {
        // if (isHomePage) {
        //     if (sort && listSorts && listSorts.length > 0) {
        //         const defaultSort = listSorts.find(item => item.isSortFieldDefault);
        //         defaultSort && dispatch(setSortOrder({
        //             sort: defaultSort.isAcsDefault,
        //             sortField: defaultSort.field
        //         }));
        //     }
        // }
    }, [listSorts]);
    
    useEffect(() => {
        // if (isHomePage) {
        //     dispatch(loadPublicContentGroups({ isLoggedIn: !!token }));
        // }
    }, [token]);

    // useEffect(() => {
    //   if (loginSetting) {
    //     if (!isAuthen && isRequireLogin && !token && !userIdSearch) {
    //       router.push(`${servicePath ? '/'+servicePath : ''}/login`);
    //     }
    //   }
    // }, [isAuthen, loginSetting, token]);
    
    // useEffect(() => {
    //   const appMobileAuthToken = StorageHelper.getLocalItem(STORAGE_KEYS.appMobileAuthToken);
    //   if (isCallStartAppWithCustomAuth && search.includes('?UserID=') && accountType === OPTION_LOGIN.GAKKEN_ID && appMobileAuthToken) {
    //     const request = {
    //       Token: appMobileAuthToken,
    //       CustomName: viewSettings.customName
    //     };
    //     window.BEObj.startAppWithCustomAuth(request);
    //     setCallstartAppWithCustomAuth(false);
    //   }
    // }, [isCallStartAppWithCustomAuth, search]);
    // useEffect(() => {
    //   if (cacheSearchRequest) {
    //     setSearchRequest(cacheSearchRequest.searchRequest || []);
    //     // setCacheSearchRequest();
    //   } else {
    //     setSearchRequest([]);
    //     setFulltextSearch(null);
    //     setSearchRequestFullTextSearch([]);
    //   }
    //   clearContents();
    // }, [showHomeSearch]);

    // useEffect(() => {
    //   clearContents();
    // }, [searchRequest, fulltextSearch]);
    
    // useEffect(() => {
    //   if (cacheSearchRequest) {
    //     setSearchRequest(cacheSearchRequest.searchRequest);
    //   }
    // }, [cacheSearchRequest]);

    return (
        <div role="main" className={`p-3 pt-5  ${classes.body} ${(!isOpenSidebar || below768 || !sideBar) && ' body-full '}`}>
            {
                isMegreLayout && bodyMegreLayout
                ? <div className={classes.bodyLayout3}>
                    {children}
                </div>
                : <>
                    {children}
                </>
            }
        </div>
    );
}