import { useEffect } from 'react';
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
import {
  getLayoutSubCategories,
  GlobalProductCategorie,
} from '../../Features/BookingScreen/BookingData/BookingData';
import { getTemplateData } from '../../Features/ThemeChange/ThemeChange';
import { getSession } from '../../Services/Others';

const LayoutSubCategoryFetcher = () => {
  const dispatch = useDispatch();

  const ProdCat = useSelector(GlobalProductCategorie, shallowEqual);
  const templateData = useSelector(getTemplateData, shallowEqual);

  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const AppId = getSession('AppId');

  useEffect(() => {
    if (!ProdCat) return;

    const isCategory5 = templateData?.BookingCategory?.[0] === 'Category5';
    const isLayout2 = templateData?.BookingLayout?.[0] === 'Layout2';

    if (isCategory5 && isLayout2) {
      dispatch(
        getLayoutSubCategories({
          CompId,
          BranchId,
          AppId,
          ProdCat,
        })
      );
    }
  }, [
    ProdCat,
    templateData?.BookingCategory?.[0],
    templateData?.BookingLayout?.[0],
  ]);

  return null; // this component renders nothing
};

export default LayoutSubCategoryFetcher;