"use client"

import AppSidebar from "@/components/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, getLayoutViewPage, getPageMargin, getServicePath, getViewSettings } from "@/lib/redux/features/serviceAdmin";
import { makeStyles } from 'tss-react/mui';
import { getAllSort, loadAllSort } from "@/lib/redux/features/sort";
import { useEffect } from "react";
import { getPublicHashtag } from "@/lib/redux/features/hashtag";
import { useParams, useRouter } from "next/navigation";
import { loadPublicContentGroups, setSortOrder } from "@/lib/redux/features/content";
import { getOpenSidebar, setShowBanner, setShowFooter, setShowHeader } from "@/lib/redux/features/layout";
import { getAuthInfo } from "@/lib/redux/features/auth";

type PropsType = {
  children: React.ReactNode;
}
export default function ThankYouLayout(props: PropsType) {
  const { children} = props;

  
  const mounted = useMounted();
  const router = useRouter();
  const { below768, getBelow768 } = useResponsive();
  const dispatch = useAppDispatch();
  const param = useParams();
  
  const isOpenSidebar = useAppSelector(getOpenSidebar);
  const listSorts = useAppSelector(getAllSort);
  const viewSettings = useAppSelector(getViewSettings);
  const bodySetting = useAppSelector(getBodySetting);
  const pageMargin = useAppSelector(getPageMargin);
  const layoutViewPage = useAppSelector(getLayoutViewPage);
  // const authInfo = useAppSelector(getAuthInfo);

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

  const useStyle = makeStyles()(() => {
    const pathname = mounted ? window.location.pathname : '';
    const isBelow768 = getBelow768();
    
    return (
      {
        body: {
          backgroundColor: `${bodySetting.backgroundColor}!important`,
          display: isMegreLayout ? '' : pathname.includes('subscription') ? 'block' : 'flex',
          flexDirection: 'row',
          flex: '1 0 0px',
          fontSize: isBelow768 ? '12px' : '16px',
          '& em': {
            // color: 'red'
          }
        },
        bodyLayout3: {
          marginLeft: isBelow768 ? pathname.includes('profile') ? '10px' : '5px' : `${pageMargin.left}px`,
          marginRight: isBelow768 ? pathname.includes('profile') ? '10px' : '5px' : `${pageMargin.right}px`
        }
      }
    );
  });

  const { classes } = useStyle();
  useEffect(() => {
    dispatch(setShowBanner(false));
    dispatch(setShowHeader(true));
    dispatch(setShowFooter(true));
  }, []);


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