import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
import {
  changealldata,
  changeBookingType,
  changeComboRedirectionToDefaultLayoutForParking,
  changeCompoPaymentIconStatus,
  changeCustomerID,
  changeEstimateBooking,
  changeOrderCardDetails,
  changeOtherServices,
  changeReorderHoldDetails,
  changeReorderProductDetails,
  changeSelectedCustId,
  changeSelectedOption,
  GlobalBookingType,
  GlobalBookingTypeBoth,
  GlobalComboRedirectionToDefaultLayoutForParking,
  GlobalCommonPaymentOptions,
  GlobalEstimateBooking,
  GlobalFeatAddOnData,
  GlobalOrderCardDetails,
  GlobalOrderStatus,
  GlobalOrderType,
  GlobalOtherSevices,
  GlobalSelCustId,
  PreferenceData,
} from '../../../../Features/BookingScreen/BookingData/BookingData.js';
import {
  ApplicationPreferences,
  GenerateLogout,
  GlobalCompBranchData,
} from '../../../../Features/BrachLogin/BranchLogin.js';
import { useApplyOfferto_CardDetail } from '../UtillComponents/BSNavBarOffer/BSNavBarOffer_CustomHooks.jsx';
import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar3.scss';

// UI Imports
import { Badge, Popconfirm, Tooltip } from 'antd';
import { AiFillHome } from 'react-icons/ai';
import { GoClockFill } from 'react-icons/go';
import {
  FaPlus,
  FaHandPaper,
  FaHeart,
  FaUserAlt,
  FaPhoneAlt,
  FaParking,
} from 'react-icons/fa';
import { CiMenuBurger } from 'react-icons/ci';
import { IoClose, IoCloseOutline } from 'react-icons/io5';
import { FaCalendar } from 'react-icons/fa6';
import {
  RiFullscreenExitFill,
  RiFullscreenFill,
  RiPrinterFill,
} from 'react-icons/ri';
import { GiShoppingBag } from 'react-icons/gi';
import { PiSignOutFill } from 'react-icons/pi';
import { TfiHandDrag } from 'react-icons/tfi';
import { CgClose } from 'react-icons/cg';

import { DropDowns } from '../../../../Components/Forms/DropDown';
import PozoDineInIcon from '../UtillComponents/Pozo retail icons/PozoDineIn.jsx';
import BSNavBarFavItems from '../UtillComponents/BSNavBarFavItems.jsx';
import BSNavBarAddUser from '../UtillComponents/BSNavBarAddUser.jsx';
import BSCustomerSelect from '../UtillComponents/BSSelectCustomer.jsx';
import FeaturesFunctionalities from '../BookingFunctionality/FeaturesFunctionalities.jsx';
import BSNavBarHand from '../UtillComponents/BSNavBarHand.jsx';
import BSNavBarDragItems from '../UtillComponents/BSNavBarDragItems.jsx';
import CustomerDisplayicon from '../UtillComponents/Pozo retail icons/PozoCustomerDisplayicon.jsx';

import BSNavBarPrinter from '../UtillComponents/BSNavBarPrinter.jsx';
import BSNavBarUserInfo from './BSNavBarUserInfo.jsx';
import {
  getUserProfile,
  userDataByUserId,
} from '../../../../Features/UserAccount/userData.js';
import {
  clearSession,
  getSession,
  sessionStore,
} from '../../../../Services/Others.js';
import UserRelieveManager from '../../Template/RealivingUser.jsx';
import BSNavbarSearchStandard from '../UtillComponents/BSNavbarSearchStandard.jsx';
import {
  getTemplate,
  getTemplateData,
  StoredSessionData,
} from '../../../../Features/ThemeChange/ThemeChange.js';
import {
  CurrentTimeDisplay,
  CurrentDateDisplay,
} from '../UtillComponents/CurrentDateTimeDisplay.jsx';
import BSPrinterSetting from '../UtillComponents/BSPrinterSetting.jsx';
import BSNavBarTable from '../UtillComponents/BSNavBarTable.jsx';
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
import { isMobile } from 'react-device-detect';
import {
  getCustomerDisplayWindow,
  setCustomerDisplayWindow,
} from '../../../../Features/customerDisplayWindow/customerDisplayWindow.js';
import BSMobilePrintSettings from '../UtillComponents/BSMobilePrintSettings.jsx';
import BSScanTemplate from '../UtillComponents/BSScanTemplate.jsx';
import VerfiedProducts from './verfiedProduct/VerfiedProducts.jsx';
import BSMembership from '../UtillComponents/BSMembership.jsx';
import BranchName from '../../Template/BranchName.jsx';
import BSNavBarAddons from '../UtillComponents/BSNavBarAddons.jsx';
import BSNavBarOffer from '../UtillComponents/BSNavBarOffer/BSNavBarOffer.jsx';
import BSNavBarQuickAdd from '../UtillComponents/BSNavBarQuickAdd.jsx';
import BSNavBarPreOrder from '../UtillComponents/BSNavBarPreOrder.jsx';
import {
  changepreOrder,
  changePreOrderAdditem,
  changepreOrderList,
  GlobalPreOrderPendingCount,
} from '../../../../Features/BookingScreen/PreOrder/PreOrder.js';
import PozoPreOrderIcon from '../UtillComponents/Pozo retail icons/PozoPreOrderIcon.jsx';
import { OtherServicesCardlistdata } from '../../../../Features/OtherServices/OtherServices.js';
import BSNavBarEstimate from '../UtillComponents/BSNavBarEst.jsx';
import BSNavBarWholeSale from '../UtillComponents/BSNavBarWholeSale.jsx';
import { Global_OfferStatus } from '../../../../Features/Offer/Offer.js';
import { globalholddata } from '../../../../Features/BookingScreen/HoldOption/HoldOption.js';
import BSNavBarWeightScale from '../UtillComponents/BSNavBarWeightScale.jsx';
import { CgSearchLoading } from 'react-icons/cg';
import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
import MultipleSearch from '../UtillComponents/MultipleSearch.jsx';

const subDirectory = import.meta.env.ENV_BASE_URL;
const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;

const BSNavbar3 = ({ optionNames }) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const applyOffer = useApplyOfferto_CardDetail();
  const userMenuRef = useRef(null);
  const searchInputRef = useRef(null);
  const mobileMenuRef = useRef(null);
  const SessionData = useSelector(StoredSessionData);
  const AppId = SessionData?.AppId;
  const CompId = SessionData?.CompId;
  const BranchId = SessionData?.BranchId;
  const userId = getSession('UserId');

  const [drawerOpen, setDrawerOpen] = useState({
    favourite: false,
    customer: false,
    hold: false,
    dragItem: false,
    reprint: false,
    verifyProduct: false,
    membership: false,
    wholesale: false,
  });
  const [isHoldEnable, setisisHoldEnable] = useState(false);
  const [isUserAccOpen, setIsUserAccOpen] = useState(false);
  const [quickAdd, setQuickAdd] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [multiple, setMultiple] = useState(false);
  const GlobEstBooking = useSelector(GlobalEstimateBooking);
  const compBranchData = useSelector(GlobalCompBranchData);
  const userProfileData = useSelector(userDataByUserId);
  const appPreferences = useSelector(ApplicationPreferences);
  const preferences = useSelector(PreferenceData);
  const orderType = useSelector(GlobalOrderType);
  const bookingType = useSelector(GlobalBookingType, shallowEqual);
  const layoutData = useSelector(getTemplateData);
  const OtherServicesglobal = useSelector(GlobalOtherSevices);
  const preOrderPendingCount = useSelector(GlobalPreOrderPendingCount);
  const comboRedirectionToDefaultLayoutForParking = useSelector(
    GlobalComboRedirectionToDefaultLayoutForParking
  );
  const Holddata = useSelector(globalholddata);
  const OrderCardDetail = useSelector(GlobalOrderCardDetails);
  const FeatureAddonData = useSelector(GlobalFeatAddOnData);
  const tableData = useSelector(GlobalOrderStatus);
  const BookingTypeBoth = useSelector(GlobalBookingTypeBoth);
  const OrderOfferStatus = useSelector(Global_OfferStatus);
  const GlobaluseOptions = useSelector(GlobalCommonPaymentOptions);
  const SelCustId = useSelector(GlobalSelCustId);

  const Estimation = preferences?.[0]?.SettingDtlDetails?.find(
    (item) => item.SettingIdName === 'Estimation'
  );
  const ScanLayoutScreen = preferences?.[0]?.SettingDtlDetails?.find(
    (item) => item.SettingIdName === 'ScanLayout'
  );
  const verifyproduct = preferences?.[0]?.SettingDtlDetails?.find(
    (item) =>
      item.SettingIdName === 'VerifyProduct' && item.SettingValue === 'Y'
  );
  const Parking = preferences?.[0]?.SettingDtlDetails?.find(
    (item) => item.SettingIdName === 'Parking' && item.SettingValue === 'Y'
  );

  const commonModulePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Common Module'
  )?.PreferenceCatDetails;
  const sportsAppPreference = commonModulePreference?.find(
    (preference) =>
      preference?.PreferredSubCatName === 'SportsApp' &&
      preference?.PreferredStatus === 'Y'
  );
  const {
    searchOption,
    reprintOption,
    quickAddOption,
    dineInOption,
    takeAwayOption,
    offerOption,
    extraChargeOption,
    holdOption,
    addCustomerOption,
  } = useMemo(() => {
    const navbarOptions = layoutData?.BookingNavbar?.[1];
    return {
      searchOption: navbarOptions?.find(
        (option) => option?.OptionName?.toLowerCase() === 'search'
      ),
      reprintOption: navbarOptions?.find(
        (option) => option?.OptionName?.toLowerCase() === 'reprint'
      ),
      quickAddOption: navbarOptions?.find(
        (option) => option?.OptionName?.toLowerCase() === 'quickadd'
      ),
      dineInOption: navbarOptions?.find(
        (option) => option?.OptionName?.toLowerCase() === 'dinein'
      ),
      takeAwayOption: navbarOptions?.find(
        (option) => option?.OptionName?.toLowerCase() === 'takeaway'
      ),
      offerOption: navbarOptions?.find(
        (option) => option?.OptionName?.toLowerCase() === 'offer'
      ),
      extraChargeOption: navbarOptions?.find(
        (option) => option?.OptionName?.toLowerCase() === 'extracharge'
      ),
      holdOption: navbarOptions?.find(
        (option) => option?.OptionName?.toLowerCase() === 'hold'
      ),
      addCustomerOption: navbarOptions?.find(
        (option) => option?.OptionName?.toLowerCase() === 'addcustomer'
      ),
    };
  }, [layoutData]);

  const [preOrderOpen, setPreOrderOpen] = useState(false);
  const [preOrderhiseandShow, setpreOrderhiseandShow] = useState(false);
  const [OtherServiceStatus, setOtherServiceStatus] = useState(false);

  // Memoized preference data
  const { dineInPreference, takeAwayPreference } = useMemo(() => {
    const bookingTypePref =
      appPreferences?.find((p) => p?.PreferredCatName === 'Booking Type')
        ?.PreferenceCatDetails || [];
    return {
      dineInPreference: bookingTypePref.find(
        (p) =>
          p?.PreferredSubCatName?.toLowerCase() === 'dine in' &&
          p?.PreferredStatus === 'Y'
      ),
      takeAwayPreference: bookingTypePref.find(
        (p) =>
          p?.PreferredSubCatName?.toLowerCase() === 'take away' &&
          p?.PreferredStatus === 'Y'
      ),
    };
  }, [appPreferences]);

  const SalesMode = preferences?.[0]?.SettingDtlDetails?.find(
    (item) => item.SettingIdName === 'Sales Mode'
  );

  const { preferenceOffer, dineIn } = useMemo(() => {
    return {
      preferenceOffer:
        preferences?.[0]?.['SettingDtlDetails']?.find(
          (item) => item.SettingIdName === 'Offer'
        )?.SettingValue === 'Y',

      dineIn: preferences?.[0]?.['SettingDtlDetails'].find(
        (item) => item.SettingIdName === 'DineIn' && item?.SettingValue === 'Y'
      ),
    };
  }, [preferences]);

  console.log(dineIn, dineInPreference, 'dineInPreference');

  const BSComboNavbar = useMemo(() => {
    const layout = optionNames?.BookingLayout?.[0];
    return layout === 'Combo1'
      ? optionNames?.BookingCombo1
      : optionNames?.BookingCombo2;
  }, [optionNames]);

  const OfferCheckedInSetup = useMemo(() => {
    return BSComboNavbar?.[1]?.some((opt) => opt.OptionName === 'Offer');
  }, [BSComboNavbar]);

  useEffect(() => {
    dispatch(getUserProfile({ UserId: userId, ActiveStatus: 'A' })).unwrap();
  }, [userId]);
  useEffect(() => {
    handleOtherData();
  }, []);
  useEffect(() => {
    getPaymentOptionFeature();
  }, [GlobaluseOptions, SelCustId]);
  const getPaymentOptionFeature = async () => {
    const filterSalesPayment = GlobaluseOptions?.filter(
      (item) => item?.FlowName?.toLowerCase() === 'sales'
    );

    let filterPayCounter = filterSalesPayment?.[0]?.OptionDetails?.filter(
      (item) => item?.OptionName?.toLowerCase() === 'pay at the counter'
    );

    // If customer NOT selected → remove credit mode
    if (!SelCustId) {
      filterPayCounter = filterPayCounter?.map((option) => ({
        ...option,
        ModeDetails: option?.ModeDetails?.filter(
          (mode) => mode?.ModeName?.toLowerCase() !== 'credit'
        ),
      }));
    }

    setisisHoldEnable(filterPayCounter?.[0]?.ModeDetails?.length > 0);
  };
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (userMenuRef.current && !userMenuRef.current.contains(event.target)) {
        setIsUserAccOpen(false);
      }
      if (
        mobileMenuRef.current &&
        !mobileMenuRef.current.contains(event.target) &&
        !event.target.closest('.mobile-toggle-btn')
      ) {
        setIsMobileMenuOpen(false);
      }
    };
    const handleEscKey = (event) => {
      if (event.key === 'Escape') {
        setIsUserAccOpen(false);
        setIsMobileMenuOpen(false);
      }
    };
    if (isUserAccOpen || isMobileMenuOpen) {
      document.addEventListener('mousedown', handleClickOutside);
      document.addEventListener('keydown', handleEscKey);
    }
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
      document.removeEventListener('keydown', handleEscKey);
    };
  }, [isUserAccOpen, isMobileMenuOpen]);

  const handleDineInNavigate = useCallback(async () => {
    navigate(`${subDirectory}sales/dine-in`);
    dispatch(changeBookingType('Dine In'));
    dispatch(changeEstimateBooking('Sales'));
    if (orderType === 'Hold') {
      dispatch(changeReorderHoldDetails({}));
      dispatch(changeReorderProductDetails([]));
      if (OfferCheckedInSetup && preferenceOffer) {
        await applyOffer([]);
      } else {
        dispatch(changeOrderCardDetails([]));
      }
    }
  }, [
    navigate,
    dispatch,
    orderType,
    OfferCheckedInSetup,
    preferenceOffer,
    applyOffer,
  ]);

  const handleTakeAway = () => dispatch(changeBookingType('TakeAway'));
  const handleUserAcc = () => setIsUserAccOpen((prev) => !prev);
  const handleHomePageNavigate = () => navigate(`${subDirectory}app-page/home`);
  const handleMobileMenuToggle = () => setIsMobileMenuOpen((prev) => !prev);

  const handleFullscreen = async () => {
    if (!isFullscreen) {
      try {
        await document.documentElement.requestFullscreen();
        setIsFullscreen(true);
      } catch (error) {
        console.error('Fullscreen error:', error);
      }
    } else {
      try {
        if (document.fullscreenElement) {
          await document.exitFullscreen();
        }
        setIsFullscreen(false);
      } catch (error) {
        console.error('Exit fullscreen error:', error);
      }
    }
  };

  const renderWithTooltip = (element, title, placement = 'bottom') => (
    <Tooltip title={title} placement={placement}>
      {element}
    </Tooltip>
  );
  const openNewTab = async () => {
    const initialData = { Paymentgateway: false };
    let screenDetails;

    if ('getScreenDetails' in window) {
      try {
        screenDetails = await window.getScreenDetails();
      } catch (error) {
        console.error('Error accessing screen details:', error);
      }
    }

    // Select second monitor if available, otherwise use primary screen
    const secondScreen = screenDetails?.screens.find(
      (screen) => screen !== screenDetails.currentScreen
    );
    const targetScreen = secondScreen || window.screen;

    const customerDisplayWindow = window.open(
      `${subDirectory}customer-display`,
      'CustomerDisplayWindow',
      `width=${targetScreen.width},height=${targetScreen.height},left=${targetScreen.left || 0},top=${targetScreen.top || 0},scrollbars=yes,resizable=yes`
    );

    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      setCustomerDisplayWindow(customerDisplayWindow);

      customerDisplayWindow.onload = () => {
        setTimeout(() => {
          // Ensure it moves & resizes correctly
          customerDisplayWindow.moveTo(
            targetScreen.left || 0,
            targetScreen.top || 0
          );
          customerDisplayWindow.resizeTo(
            targetScreen.width,
            targetScreen.height
          );

          // Try fullscreen (Needs user interaction)
          try {
            customerDisplayWindow.document.documentElement.requestFullscreen();
          } catch (err) {
            console.warn('Fullscreen request failed:', err);
          }

          // Send initial data
          customerDisplayWindow.postMessage(initialData, '*');
        }, 500);
      };
    } else {
      console.error('Customer display window failed to open.');
    }
  };
  const handleQuickAddClose = async () => {
    dispatch(changeCompoPaymentIconStatus(false));
    setQuickAdd(false);
  };

  const handleQuickAddOpen = async () => {
    dispatch(changeCompoPaymentIconStatus(true));
    setQuickAdd(true);
  };

  const handleBackToLogin = () => {
    clearSession('BranchId');
    navigate(`${subDirectory}app-page/branch-login`);
  };

  const handleEditProfile = async () => {
    navigate(`${subDirectory}app-page/redirect-userprofile`);
  };

  const Logout = async () => {
    const status = 'N'; // replace with your actual status
    const res = await dispatch(
      GenerateLogout({ UserId: userId, status })
    ).unwrap();
    if (res?.data?.statusCode === 1) {
      clearSession();
      await sessionStore('Mode', 'Logout');
      window.location.replace(commonUrl);
    }
  };

  const openPreOrder = async (e) => {
    if (e == 'small-screen') {
      setPreOrderOpen(true);
      if (!preOrderhiseandShow) {
        setpreOrderhiseandShow(true);
      } else {
        setpreOrderhiseandShow(false);
      }

      // setpreOrderhiseandShow(!preOrderhiseandShow)
    } else {
      setPreOrderOpen((prevState) => !prevState);
      if (preOrderOpen) {
        const customerDisplayWindow = getCustomerDisplayWindow();
        if (customerDisplayWindow && !customerDisplayWindow.closed) {
          const updatedRemovedData = {
            userData: [],
            ExtraCharges: [],
            paymentMethod: 'Cash',
            type: 'remove',
            keyValue: 'customer',
          };
          customerDisplayWindow.postMessage(updatedRemovedData, '*');
        } else {
          console.error(
            'Customer display window is not available or has been closed.'
          );
        }
        await dispatch(changepreOrder(false));
        await dispatch(changeEstimateBooking('Sales'));
        await dispatch(changePreOrderAdditem('AddDetails'));
        await dispatch(changealldata(null));
        await dispatch(changepreOrderList(null));
        await dispatch(changeCustomerID(null));
        await dispatch(changeSelectedCustId(null));
        await dispatch(changeSelectedOption(null));
      }
    }
  };

  const preOrderHandleclose = async () => {
    setPreOrderOpen(false);
    await dispatch(changepreOrder(false));
    setpreOrderhiseandShow(false);
  };

  const handleOtherData = async (e) => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
    };
    let response = await dispatch(OtherServicesCardlistdata(data)).unwrap();
    if (response?.data?.statusCode === 1) {
      setOtherServiceStatus(true);
    } else {
      setOtherServiceStatus(false);
    }
  };
  const handleotherservices = async () => {
    if (OtherServicesglobal && comboRedirectionToDefaultLayoutForParking) {
      dispatch(changeComboRedirectionToDefaultLayoutForParking(false));
      await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
    }
    dispatch(changeOtherServices(!OtherServicesglobal));
    dispatch(changeOrderCardDetails([]));
  };

  return (
    <>
      <div className="BSNavbar3Main">
        <div className="homeTime">
          <div className="homeIcon">
            <Popconfirm
              title="Are you sure you want to go to home page?"
              onConfirm={handleHomePageNavigate}
              okText="Yes"
              cancelText="No"
            >
              <AiFillHome color="#fff" size={24} />
            </Popconfirm>{' '}
            <div>
              {' '}
              <BranchName />
            </div>
          </div>

          {OtherServiceStatus && Parking && (
            <div
              style={{
                fontSize: '1.5rem',
                color: 'rgb(18, 146, 238)',
                position: 'sticky',
              }}
            >
              <TooltipWrapper title="Other Services" isMobile={isMobile}>
                <div onClick={handleotherservices}>
                  <FaParking
                    style={{
                      display: 'flex',
                      justifyContent: 'center',
                      cursor: 'pointer',
                    }}
                    fill={OtherServicesglobal === true ? '#52C41A' : '#1292EE'}
                  />
                </div>
              </TooltipWrapper>
            </div>
          )}
        </div>

        {/* Multiple search  */}
        <Tooltip title={'Multiple Search'}>
          <div className="MultiSearchIconDiv3">
            <CgSearchLoading onClick={() => setMultiple(true)} />
          </div>
        </Tooltip>
        {!sportsAppPreference && searchOption && (
          <div
            className="BsnavbarSearchMain"
            onClick={() => searchInputRef.current?.focus()}
          >
            <BSNavbarSearchStandard inputRef={searchInputRef} />
          </div>
        )}

        {/* Customer Select - Always visible */}
        <div className="DropDownsCustomer always-visible">
          <BSCustomerSelect
            placeholder="Customer Name"
            TopName={'navbar-top'}
          />
          {addCustomerOption && (
            <span>
              {renderWithTooltip(<BSNavBarAddUser />, 'Add Customer')}
            </span>
          )}
          {/* <IoClose className="DropDownsCustomerClose" strokeWidth={3} /> */}
        </div>

        {offerOption && (
          <div className="standard-extra-charges">
            {GlobEstBooking !== 'OvrAllEst' &&
              GlobEstBooking !== 'ParEst' &&
              GlobEstBooking === 'Sales' &&
              preferences?.[0]?.['SettingDtlDetails']?.find(
                (item) => item.SettingIdName === 'Offer'
              )?.SettingValue === 'Y' && (
                <div
                  style={{
                    pointerEvents: orderType === 'Failed' ? 'none' : 'auto',
                  }}
                >
                  <BSNavBarOffer />
                </div>
              )}
          </div>
        )}
        {extraChargeOption && !sportsAppPreference && (
          <div
            className="standard-extra-charges"
            style={{
              pointerEvents: orderType === 'Failed' ? 'none' : 'auto',
            }}
          >
            <BSNavBarAddons />
          </div>
        )}

        {!sportsAppPreference && quickAddOption && (
          <div
            className="standard-extra-charges"
            style={{
              pointerEvents: orderType === 'Failed' ? 'none' : 'auto',
            }}
          >
            <BSNavBarQuickAdd />
          </div>
        )}
        {/* Desktop CustomerActions */}
        <div className="CustomerActions desktop-only">
          {/* {(takeAwayPreference && takeAwayOption) && renderWithTooltip(
                        <GiShoppingBag size={43} className="FaTruckIcon" color={bookingType === 'TakeAway' ? '#52c41a' :
                            '#6b7280'} onClick={handleTakeAway} />, 'Takeaway')}
                    {(dineInPreference && dineIn && dineInOption) && renderWithTooltip(
                        <PozoDineInIcon width='40' height='40' className="FaTruckIcon" onClick={handleDineInNavigate} />, 'Dine-in')} */}

          {dineInPreference && dineIn && dineInOption && (
            <div className="mobile-action-item">
              <BSNavBarTable />
            </div>
          )}

          {!OtherServicesglobal && (
            <>
              {FeatureAddonData?.FeatureDtls?.find(
                (item) =>
                  item?.FeatureAddonName?.toLowerCase() !== 'weight scale'
              ) && (
                <div
                  style={{
                    pointerEvents: orderType === 'Failed' ? 'none' : 'auto',
                  }}
                >
                  <BSNavBarWeightScale />
                </div>
              )}
              {FeatureAddonData?.FeatureDtls?.find(
                (item) => item?.FeatureAddonName?.toLowerCase() === 'preorder'
              ) && (
                <div
                  className="BSBillingNavBar2-AllIcons"
                  style={{
                    pointerEvents:
                      tableData || orderType === 'Failed' ? 'none' : 'auto',
                    opacity: tableData ? 0.5 : 1,
                  }}
                >
                  <TooltipWrapper title={'Pre Booking'} isMobile={isMobile}>
                    <Badge
                      count={preOrderPendingCount}
                      offset={[-5, 10]}
                      size="small"
                    >
                      <PozoPreOrderIcon
                        className="BSBillingNav-icon"
                        fill={preOrderOpen ? '#52C41A' : '#1292EE'}
                        onClick={() => {
                          openPreOrder();
                        }}
                        HandleClose={preOrderHandleclose}
                      />
                    </Badge>
                  </TooltipWrapper>
                </div>
              )}
            </>
          )}
          {preOrderOpen && (
            <div className="smallScreenclose">
              <BSNavBarPreOrder HandleClose={preOrderHandleclose} />
            </div>
          )}
          {sportsAppPreference && <BSMembership />}
          {!OtherServicesglobal && (
            <>
              {Estimation?.SettingValue === 'Y' &&
                bookingType !== 'Dine In' &&
                !BookingTypeBoth &&
                !OrderOfferStatus && (
                  <div
                    className="BSBillingNavBar2-AllIcons"
                    style={{
                      pointerEvents: orderType === 'Failed' ? 'none' : 'auto',
                    }}
                  >
                    <BSNavBarEstimate />
                  </div>
                )}
            </>
          )}

          {SalesMode?.SettingValue === 'Y' && !OtherServicesglobal && (
            <BSNavBarWholeSale />
          )}

          {!sportsAppPreference && (
            <div className="FaTruckIconFavItem" style={{ padding: '4px 6px' }}>
              {renderWithTooltip(
                <BSNavBarFavItems
                  size={41}
                  className="FaTruckIcon"
                  fill={'#fff'}
                />,
                'Favourites'
              )}
            </div>
          )}
          {/* 
          {!sportsAppPreference &&
            quickAddOption &&
            renderWithTooltip(
              <FaPlus className="FaTruckIcon" onClick={handleQuickAddOpen} />,
              'QUICK ADD (SHIFT + Q)'
            )} */}

          {holdOption &&
            ((bookingType !== 'Dine In' && OrderCardDetail?.length != 0) ||
              (bookingType !== 'Dine In' &&
                Holddata?.length > 0 &&
                OrderCardDetail?.length == 0)) &&
            isHoldEnable &&
            renderWithTooltip(
              <BSNavBarHand
                ComponentIcon={FaHandPaper}
                iconSize={50}
                iconClassName="FaTruckIconHold"
              />,
              'Hold'
            )}
          {ScanLayoutScreen?.SettingValue === 'Y' && <BSScanTemplate />}
          <div
            className="FaTruckIconDragItems"
            style={{ pointerEvents: orderType === 'Failed' ? 'none' : 'auto' }}
          >
            <BSNavBarDragItems />
          </div>
          {FeatureAddonData?.FeatureDtls?.find(
            (item) =>
              item?.FeatureAddonName?.toLowerCase() === 'customer display'
          ) && (
            <TooltipWrapper title="Customer Display" isMobile={isMobile}>
              <div
                onClick={openNewTab}
                className="BSBillingNavBar1-AllIcons"
                style={{ width: '1.3rem', margin: '10px', cursor: 'pointer' }}
              >
                <CustomerDisplayicon />
              </div>
            </TooltipWrapper>
          )}
          <TooltipWrapper title="Reprint (Alt+R)" isMobile={isMobile}>
            {reprintOption && (
              <div
                style={{
                  pointerEvents: orderType === 'Failed' ? 'none' : 'auto',
                  color: '#6b7280',
                }}
              >
                <div className="FaTruckIconreprint">
                  <BSPrinterSetting IconComponent={RiPrinterFill} />
                </div>
              </div>
            )}
          </TooltipWrapper>

          {verifyproduct && (
            <div style={{ color: 'green' }}>
              <TooltipWrapper
                title={
                  sportsAppPreference
                    ? 'Booking Verification'
                    : 'Verified Products'
                }
                isMobile={isMobile}
              >
                <div>
                  <VerfiedProducts />
                </div>
              </TooltipWrapper>
            </div>
          )}
        </div>
        {isMobile && (
          <div
            style={{
              color: '#6b7280',
            }}
          >
            <BSMobilePrintSettings />
          </div>
        )}

        <div className="userDates">
          <div className="datesNewtimedate">
            <CurrentDateDisplay />
            <CurrentTimeDisplay />
          </div>

          <Tooltip title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}>
            <div
              className={
                isFullscreen ? 'BsNavbar3FullScreenExit' : 'BsNavbar3FullScreen'
              }
              onClick={handleFullscreen}
            >
              {isFullscreen ? <RiFullscreenExitFill /> : <RiFullscreenFill />}
            </div>
          </Tooltip>

          <div className="BsNavbarUser">
            <FaUserAlt size={18} onClick={handleUserAcc} />
            <BSNavBarUserInfo
              isOpen={isUserAccOpen}
              divRef={userMenuRef}
              CompBranchData={compBranchData}
              BacktoLogin={handleBackToLogin}
              userProfileData={userProfileData}
              handleEditProfile={handleEditProfile}
              UserRelieveManager={<UserRelieveManager />}
              Logout={Logout}
            />
          </div>

          {/* Mobile Toggle Button */}
          <div className="mobile-toggle-btn" onClick={handleMobileMenuToggle}>
            <CiMenuBurger size={20} color="#fff" />
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      <div
        className={`mobile-menu ${isMobileMenuOpen ? 'open' : ''}`}
        ref={mobileMenuRef}
      >
        <div className="mobile-menu-content">
          <div
            className="mobile-toggle-btn"
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'flex-end',
              width: '100%',
              cursor: 'pointer',
              padding: '2px 0',
            }}
            onClick={handleMobileMenuToggle}
          >
            {isMobileMenuOpen ? (
              <IoCloseOutline size={25} strokeWidth={2} color="#fff" />
            ) : (
              <CiMenuBurger height={20} size={20} color="#fff" />
            )}
          </div>
          <div className="mobile-customer-actions">
            {takeAwayPreference && takeAwayOption && (
              <div className="mobile-action-item" onClick={handleTakeAway}>
                <GiShoppingBag
                  size={30}
                  color={bookingType === 'TakeAway' ? '#52c41a' : '#6b7280'}
                />
                <div>Take Away</div>
              </div>
            )}
            {dineInPreference && dineIn && dineInOption && (
              <div className="mobile-action-item">
                <BSNavBarTable width="30" height="30" />
                <div>{bookingType}</div>
              </div>
            )}
            {!sportsAppPreference && (
              <div
                className="mobile-action-item"
                onClick={() =>
                  setDrawerOpen((prev) => ({
                    ...prev,
                    favourite: !prev?.favourite,
                  }))
                }
              >
                <BSNavBarFavItems
                  size={30}
                  drawerOpen={drawerOpen?.favourite}
                  fill={'#fff'}
                />
                <div>Favourite</div>
              </div>
            )}
            {addCustomerOption && (
              <div
                className="mobile-action-item"
                onClick={() =>
                  setDrawerOpen((prev) => ({
                    ...prev,
                    customer: !prev?.customer,
                  }))
                }
              >
                <BSNavBarAddUser
                  drawerOpen={drawerOpen?.customer}
                  setDrawerOpen={setDrawerOpen}
                />
                <div>Add Customer</div>
              </div>
            )}
            {quickAddOption && (
              <div className="mobile-action-item" onClick={handleQuickAddOpen}>
                {renderWithTooltip(<FaPlus size={30} />, 'Quick Add', 'top')}
                <div>Quick Add</div>
              </div>
            )}
            {holdOption &&
              ((bookingType !== 'Dine In' && OrderCardDetail?.length != 0) ||
                (bookingType !== 'Dine In' &&
                  Holddata?.length > 0 &&
                  isHoldEnable &&
                  OrderCardDetail?.length == 0)) && (
                <div
                  className="mobile-action-item"
                  onClick={() =>
                    setDrawerOpen((prev) => ({ ...prev, hold: !prev?.hold }))
                  }
                >
                  <BSNavBarHand
                    ComponentIcon={FaHandPaper}
                    iconSize={20}
                    style={{ width: '15px' }}
                    drawerOpen={drawerOpen}
                    setDrawerOpen={setDrawerOpen}
                  />
                  <div>Hold</div>
                </div>
              )}
            {ScanLayoutScreen?.SettingValue === 'Y' && <BSScanTemplate />}
            <div
              className="mobile-action-item"
              onClick={(e) => {
                if (e.target === e.currentTarget) {
                  setDrawerOpen((prev) => ({
                    ...prev,
                    dragItem: !prev?.dragItem,
                  }));
                }
              }}
            >
              <BSNavBarDragItems
                drawerOpen={drawerOpen}
                setDrawerOpen={setDrawerOpen}
              />
              <div
                onClick={(e) => {
                  if (e.target === e.currentTarget) {
                    setDrawerOpen((prev) => ({
                      ...prev,
                      dragItem: !prev?.dragItem,
                    }));
                  }
                }}
              >
                Drag Item
              </div>
            </div>
            {reprintOption && (
              <div
                className="mobile-action-item"
                onClick={(e) => {
                  if (e.target === e.currentTarget) {
                    setDrawerOpen((prev) => ({
                      ...prev,
                      reprint: !prev?.reprint,
                    }));
                  }
                }}
              >
                <BSPrinterSetting
                  IconComponent={RiPrinterFill}
                  drawerOpen={drawerOpen}
                  setDrawerOpen={setDrawerOpen}
                />
                <div
                  onClick={(e) => {
                    if (e.target === e.currentTarget) {
                      setDrawerOpen((prev) => ({
                        ...prev,
                        reprint: !prev?.reprint,
                      }));
                    }
                  }}
                >
                  Re-Print
                </div>
              </div>
            )}
            {verifyproduct && (
              <div
                className="mobile-action-item"
                onClick={(e) => {
                  if (e.target === e.currentTarget) {
                    setDrawerOpen((prev) => ({
                      ...prev,
                      verifyProduct: !prev?.verifyProduct,
                    }));
                  }
                }}
              >
                <TooltipWrapper title={'Verfied Products'} isMobile={isMobile}>
                  <div>
                    <VerfiedProducts
                      drawerOpen={drawerOpen}
                      setDrawerOpen={setDrawerOpen}
                    />
                  </div>
                </TooltipWrapper>

                <div
                  onClick={(e) => {
                    if (e.target === e.currentTarget) {
                      setDrawerOpen((prev) => ({
                        ...prev,
                        verifyProduct: !prev?.verifyProduct,
                      }));
                    }
                  }}
                >
                  Verify Product
                </div>
              </div>
            )}

            {sportsAppPreference && (
              <div
                className="mobile-action-item"
                onClick={(e) => {
                  if (e.target === e.currentTarget) {
                    setDrawerOpen((prev) => ({
                      ...prev,
                      membership: !prev?.membership,
                    }));
                  }
                }}
              >
                <BSMembership
                  drawerOpen={drawerOpen}
                  setDrawerOpen={setDrawerOpen}
                />
                <div
                  onClick={(e) => {
                    if (e.target === e.currentTarget) {
                      setDrawerOpen((prev) => ({
                        ...prev,
                        membership: !prev?.membership,
                      }));
                    }
                  }}
                >
                  Membership
                </div>
              </div>
            )}

            {!OtherServicesglobal && (
              <>
                {Estimation?.SettingValue === 'Y' &&
                  bookingType !== 'Dine In' &&
                  !BookingTypeBoth &&
                  !OrderOfferStatus && (
                    <div
                      className="BSBillingNavBar2-AllIcons"
                      style={{
                        pointerEvents: orderType === 'Failed' ? 'none' : 'auto',
                      }}
                    >
                      <div className="mobile-action-item" onClick={() => {}}>
                        <BSNavBarEstimate />
                        <div>Estimate</div>
                      </div>
                    </div>
                  )}
              </>
            )}
            {SalesMode?.SettingValue === 'Y' && !OtherServicesglobal && (
              <div
                className="mobile-action-item"
                onClick={(e) => {
                  if (e.target === e.currentTarget) {
                    setDrawerOpen((prev) => ({
                      ...prev,
                      wholesale: !prev?.wholesale,
                    }));
                  }
                }}
              >
                <BSNavBarWholeSale
                  drawerOpen={drawerOpen}
                  setDrawerOpen={setDrawerOpen}
                />
                <div
                  onClick={(e) => {
                    if (e.target === e.currentTarget) {
                      setDrawerOpen((prev) => ({
                        ...prev,
                        wholesale: !prev?.wholesale,
                      }));
                    }
                  }}
                >
                  WholeSale
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      <DefaultModal
        open={multiple}
        title="Multiple Search"
        footer={false}
        width={350}
        handleCancel={() => setMultiple(false)}
        destroyOnClose={true}
        children={
          <>
            <MultipleSearch close={setMultiple} />
          </>
        }
      />
      {quickAdd && (
        <FeaturesFunctionalities
          handleQuickAddCancel={handleQuickAddClose}
          QuickAdd={quickAdd}
        />
      )}
    </>
  );
};

export default BSNavbar3;