Android_Retail/src/Pages/BookingScreen/Components/BSCombo/BSC1NavBar.jsx

import React, { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { TiLocation } from 'react-icons/ti';
import { BsFillPersonFill } from 'react-icons/bs';
import { PiStorefrontFill } from 'react-icons/pi';
import { BiSolidDashboard, BiSolidReport } from 'react-icons/bi';
import { FaUserLarge } from 'react-icons/fa6';
import { BiSolidPhoneCall } from 'react-icons/bi';
import { CgMenuGridR } from 'react-icons/cg';
import { MdTableChart } from 'react-icons/md';
import { MdEdit } from 'react-icons/md';
import MyTime, { DateDisplay, TimeDisplay } from './BSTimer.jsx';
import '../../../../Styles/BookingScreen/Template/BSLayout7/BSC1NavBar.scss';
import {
  GenerateLogout,
  getBranchDetail,
  getCompBranchData,
} from '../../../../Features/BrachLogin/BranchLogin.js';
import { clearSession, sessionStore } from '../../../../Services/Others';
import PozoHomeIcon from '../UtillComponents/Pozo retail icons/PozoHomeIcon.jsx';
import { GlobalCompBranchData } from '../../../../Features/BrachLogin/BranchLogin.js';
import BSPrinterSetting from '../UtillComponents/BSPrinterSetting.jsx';
import { isMobile } from 'react-device-detect';
import { FaDisplay } from 'react-icons/fa6';
import {
  FeatureAddon,
  GlobalFeatAddOnData,
  PreferenceData,
} from '../../../../Features/BookingScreen/BookingData/BookingData.js';
import {
  setCustomerDisplayWindow,
  closeCustomerDisplayWindow,
} from '../../../../Features/customerDisplayWindow/customerDisplayWindow';
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
import {
  getUserProfile,
  userDataByUserId,
} from '../../../../Features/UserAccount/userData.js';
import UserRelieveManager from '../../Template/RealivingUser.jsx';
import BSNavBarUserInfo from '../BSNavbar/BSNavBarUserInfo.jsx';
import BSScanTemplate from '../UtillComponents/BSScanTemplate.jsx';
import { RiFullscreenExitFill, RiFullscreenFill } from 'react-icons/ri';
import { Tooltip } from 'antd';
import { FaCaretDown } from 'react-icons/fa';

const subDirectory = import.meta.env.ENV_BASE_URL;
const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
const BSC1NavBar = (props) => {
  const BSComboData = props?.hasOwnProperty('data') ? props['data'] : null;
  const divRef = useRef(null);

  const navigate = useNavigate();
  const dispatch = useDispatch();
  const AppId = props?.SessionData?.AppId;
  const CompId = props?.SessionData?.CompId;
  const BranchId = props?.SessionData?.BranchId;
  const UserId = props?.SessionData?.UserId;
  const UserType = props?.SessionData?.UserType;
  const [formattedDate, setFormattedDate] = useState('');
  const [isAccOpen, setAccIsOpen] = useState(false);
  const [menu, setMenu] = useState(false);
  const [branchName, setBranchName] = useState('Guest');
  const [BranchCity, setBranchCity] = useState();
  const CompBranchData = useSelector(GlobalCompBranchData);
  const FeatureAddonData = useSelector(GlobalFeatAddOnData);
  const preferenceDatas = useSelector(PreferenceData);
  const [isFullscreen, setIsFullscreen] = useState(false);

  // const [FeatureAddonData, setFeatureAddonData] = useState([]);
  const userProfileData = useSelector(userDataByUserId);
  console.log('userProfileData', userProfileData);
  const handleHome = () => {
    navigate(`${subDirectory}app-page/home`);
  };

  const ScanLayoutScreen = preferenceDatas?.[0]?.SettingDtlDetails?.find(
    (item) => item.SettingIdName === 'ScanLayout'
  );

  useEffect(() => {
    const d = new Date();
    const options = { weekday: 'short', day: '2-digit', month: 'long' };
    const formatted = d.toLocaleDateString('en-GB', options);
    setFormattedDate(formatted);
    fetchBranchDetailData();
    fetchBranchData();
    // if (UserType !== 'Super Admin' && UserType !== 'Super Admin User') {
    //   getFeatureAddonData();
    // }
  }, []);
  const fetchBranchDetailData = async () => {
    const response = await dispatch(
      getBranchDetail({ BrId: BranchId })
    ).unwrap();
    if (response?.data?.statusCode === 1) {
      setBranchName(response?.data?.data?.[0]?.BrName);
      setBranchCity(response?.data?.data?.[0]?.City);
    }
  };
  const fetchBranchData = async () => {
    if (UserType === 'Super Admin' || UserType === 'Super Admin User') {
      await dispatch(
        getCompBranchData({ CompId: CompId, AppId: AppId })
      ).unwrap();
    } else if (UserType === 'Admin' || UserType === 'Admin User') {
      await dispatch(
        getCompBranchData({ AppId: AppId, UserId: UserId, CompId: CompId })
      ).unwrap();
    }
  };
  // const getFeatureAddonData = async () => {
  //   let featureAddon = await dispatch(
  //     FeatureAddon({ AppId: AppId, UserId: UserId })
  //   ).unwrap();
  //   if (featureAddon?.data?.statusCode === 1) {
  //     setFeatureAddonData(featureAddon?.data?.data?.[0]?.FeatAddonHdr?.[0]);
  //   } else {
  //     setFeatureAddonData([]);
  //   }
  // };
  const UserAcc = () => {
    setAccIsOpen(!isAccOpen);
  };
  const BacktoLogin = () => {
    clearSession('BranchId');
    navigate(`${subDirectory}app-page/branch-login`);
  };

  //   const Logout = () =>{
  //         closeCustomerDisplayWindow()
  //         clearSession()
  //         window.location.replace(commonUrl);

  //   }
  //mohan
  const Logout = async () => {
    const status = 'N'; // replace with your actual status
    const res = await dispatch(GenerateLogout({ UserId, status })).unwrap();
    if (res?.data?.statusCode === 1) {
      clearSession();
      await sessionStore('Mode', 'Logout');
      window.location.replace(commonUrl);
    }
  };
  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 openNewTab = async () => {

  //     const initialData = {
  //         Paymentgateway: false,
  //     };

  //     const customerDisplayWindow = window.open(`${subDirectory}customer-display`, 'CustomerDisplayWindow', 'width=2000,height=5000,scrollbars=yes,resizable=yes');
  //     if (customerDisplayWindow && !customerDisplayWindow.closed) {
  //         setCustomerDisplayWindow(customerDisplayWindow);

  //         customerDisplayWindow.onload = () => {
  //             setTimeout(() => {
  //                 customerDisplayWindow.postMessage(initialData, '*'); // Or use targetOrigin for CORS
  //             }, 500); // Slight delay to ensure window is ready
  //         };
  //     } else {
  //         console.error("Customer display window failed to open.");
  //     }
  // };
  const handleEditProfile = async () => {
    navigate(`${subDirectory}app-page/redirect-userprofile`);
  };
  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);
      }
    }
  };

  return (
    <>
      <div
        className="BSC1NavBar-Container"
        style={{
          // backgroundColor:
          //   BSComboData?.BookingLayout?.[0] === 'Combo1'
          //     ? '#645CAA'
          //     : '#08A7B8',
          background: 'linear-gradient(to bottom right, #1e2536, #2a3447)',
        }}
      >
        <div className="BSC1NavBar-div1">
          <div className="BSC1NavBar-manu">
            <PozoHomeIcon
              style={{ color: '#1292EE', fontSize: '30px' }}
              className="BSC1NavBar-manu-icon"
              onClick={handleHome}
            />
            <div
              className={`BSC1NavBar-manu-content ${menu ? 'BSC1NavBar-manu-menu' : ''}`}
            >
              <div className="BSC1NavBar-manu-div">
                <TooltipWrapper
                  placement="right"
                  title="DashBoard"
                  isMobile={isMobile}
                >
                  <BiSolidDashboard className="BSC1Nav-menu-icon" />
                </TooltipWrapper>

                <TooltipWrapper
                  placement="right"
                  title="Booking / Sale"
                  isMobile={isMobile}
                >
                  <CgMenuGridR className="BSC1Nav-menu-icon" />
                </TooltipWrapper>

                <TooltipWrapper
                  placement="right"
                  title="TableBooking"
                  isMobile={isMobile}
                >
                  <MdTableChart className="BSC1Nav-menu-icon" />
                </TooltipWrapper>

                <TooltipWrapper
                  placement="right"
                  title="Report"
                  isMobile={isMobile}
                >
                  <BiSolidReport className="BSC1Nav-menu-icon" />
                </TooltipWrapper>
              </div>
            </div>
          </div>

          <div className="BSC1NavBar-name">
            {/* <PiStorefrontFill className="BSC1NavBar-name-icon" /> */}
            <TooltipWrapper placement="bottom" title={branchName}>
              <span className="BSC1NavBar-ellipsisname">{branchName}</span>{' '}
            </TooltipWrapper>
            {BranchCity && (
              <span className="BSC1NavBar-location">
                {' '}
                <TiLocation className="BSC1NavBar-location-icon" />
                <span className="BSC1NavBar-name-ellipsis">
                  {BranchCity}
                </span>{' '}
              </span>
            )}
          </div>

          <div className="BSC1NavBar-name">
            {ScanLayoutScreen?.SettingValue === 'Y' && (
              <span className="BSC1NavBarlocation">
                <BSScanTemplate />
              </span>
            )}
          </div>

          <div></div>
        </div>
        <div className="BSC1NavBar-div2">
          <div className="BSC1NavBar-date">
            {/* {formattedDate} */}
            <TimeDisplay />

            <DateDisplay />
          </div>

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

          {FeatureAddonData?.FeatureDtls?.find(
            (item) =>
              item?.FeatureAddonName?.toLowerCase() === 'customer display'
          ) && (
            <TooltipWrapper title="Customer Display" isMobile={isMobile}>
              <div
                onClick={openNewTab}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  cursor: 'pointer',
                }}
              >
                <FaDisplay color="#1292ee" size={18} />
              </div>
            </TooltipWrapper>
          )}

          {!isMobile && (
            <div className="comboPrinterIcon">
              <BSPrinterSetting />
            </div>
          )}

          <div className="BSC1NavBar-person" onClick={UserAcc}>
            <TooltipWrapper title="Account " isMobile={isMobile}>
              <div className="myProfileIconDrDown">
                <BsFillPersonFill className="BSC1NavBar-person-icon" />
                <FaCaretDown />
              </div>
            </TooltipWrapper>
          </div>
          {isAccOpen && (
            <BSNavBarUserInfo
              isOpen={isAccOpen}
              divRef={divRef}
              CompBranchData={CompBranchData}
              BacktoLogin={BacktoLogin}
              userProfileData={userProfileData}
              handleEditProfile={handleEditProfile}
              UserRelieveManager={<UserRelieveManager />}
              Logout={Logout}
            />
          )}
        </div>
      </div>
    </>
  );
};

export default BSC1NavBar;