import {
  useEffect,
  useState,
  useCallback,
  useRef,
  lazy,
  Suspense,
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import moment from 'moment';
import { Tooltip, Badge, Popconfirm } from 'antd';
import { isMobile } from 'react-device-detect';

import { dynamicComponentProps } from '../DynamicComponentProps.js';
import {
  getKioskDatas,
  globalKioskSalesCount,
} from '../../../../Features/Kiosk/kiosk.js';
import {
  GlobalPricingAppPricingName,
  SelectedGlobalCardColorDetail,
  SelectedGlobalCatgColorDetail,
  SelectedGlobalLayoutColorDetail,
  StoredSessionData,
  getTemplateData,
} from '../../../../Features/ThemeChange/ThemeChange';
import {
  GlobalSalesDetailData,
  getSalesDetailData,
  GlobalCombosearch,
  GlobalOrderStatus,
  PreferenceData,
  GlobalAppExpDateData,
  GlobalBtoBQuickProductTransfer,
  GlobalOtherSevices,
} from '../../../../Features/BookingScreen/BookingData/BookingData.js';
import { getSession } from '../../../../Services/Others.js';
import {
  GLobalSadminUserPin,
  putSadminUserExit,
  checkSession,
  ApplicationPreferences,
} from '../../../../Features/BrachLogin/BranchLogin';
import '../../../../Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss';
import {
  getBookingStatus,
  GlobalBookingStatus,
} from '../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';

import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
import BSItemCard from '../../Components/BSItemCards/BSItemCard';
const BSBillingTable1 = lazy(
  () => import('../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1')
);
const BSBillingTable2 = lazy(
  () =>
    import('../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2')
);
const BSBillingTable3 = lazy(
  () =>
    import('../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall')
);
const BSBillingTable4 = lazy(
  () =>
    import('../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full')
);
const BSBillingTable5 = lazy(
  () =>
    import('../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5')
);
const BSBillingTable6 = lazy(
  () => import('../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6')
);
const BSBillingTable7 = lazy(
  () =>
    import('../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx')
);
const CategoryHorizontal = lazy(
  () => import('../../Components/BSCategories/BSCategoryHorizontal')
);

const BSKioskCounterPayment = lazy(
  () => import('../../Components/UtillComponents/BSKioskCounterPayment.jsx')
);
import PozoKioskIcon from '../../Components/UtillComponents/Pozo retail icons/PozoKioskIcon.jsx';
const SalesCountComponent = lazy(() => import('../SalesCountComponent.jsx'));
import { Messages } from '../../../../Components/Notifications/Messages.jsx';
const SAdminUserNotification = lazy(
  () =>
    import('../../Components/BookingFunctionality/SAdminUserNotification.jsx')
);

const RetailBookingClosing = lazy(() => import('../RetailBookingClose.jsx'));
import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
const BSComboItemCard = lazy(
  () => import('../../Components/BSItemCards/BSComboItemCard.jsx')
);

const BSOtherServiceItemCard = lazy(
  () => import('../../Components/BSItemCards/BSOtherServiceItemCard.jsx')
);
const BSOtherServicesHorizontalcat = lazy(
  () => import('../../Components/BSCategories/BSOtherServicesHorizontalcat')
);
const SalesCountForStandard = lazy(
  () => import('../SalesCountForStandard.jsx')
);
import BsBookingitemCard from '../../Components/BSItemCards/BsBookingitemCard.jsx';
const ListOfSalesInvoices = lazy(
  () =>
    import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
);

const BSNavbar3 = lazy(() => import('../../Components/BSNavbar/BSNavbar3.jsx'));
const StandardTable = lazy(
  () =>
    import('../../Components/BSBillingTables/StandardTable/StandardTable.jsx')
);
const ComboSalesBillTable = lazy(
  () =>
    import('../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx')
);
const BranchTransferComponent = lazy(
  () =>
    import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
);
const BSExpireProductsList = lazy(
  () => import('../../Components/UtillComponents/BSExpireProductsList.jsx')
);
const PlanExpireNotification = lazy(
  () => import('../PlanExpireNotification.jsx')
);

const BSLayout2 = () => {
  const dispatch = useDispatch();
  const elementRef = useRef(null);
  const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');

  const BSLayout2Data = useSelector(getTemplateData);
  const GlobalLayoutColorDetail = useSelector(SelectedGlobalLayoutColorDetail);
  const SelectedCatgColor = useSelector(SelectedGlobalCatgColorDetail);
  const SelectedCardColor = useSelector(SelectedGlobalCardColorDetail);
  const SettingDataSelector = useSelector(PreferenceData);
  const GlobalsalesDetailData = useSelector(GlobalSalesDetailData);
  const OrderStatus = useSelector(GlobalOrderStatus);

  const PricingAppPricingName = useSelector(GlobalPricingAppPricingName);
  console.log(PricingAppPricingName, 'PricingAppPricingName');
  const Comboglobal = useSelector(GlobalCombosearch);
  console.log(Comboglobal, 'Comboglobal in layout2');
  const SAdminuserPin = useSelector(GLobalSadminUserPin);
  const SessionData = useSelector(StoredSessionData);
  const { action, selectedProducts } = useSelector(
    GlobalBtoBQuickProductTransfer
  );
  const badgeCount = useSelector(globalKioskSalesCount);
  const AppExpDate = useSelector(GlobalAppExpDateData);

  const OtherServicesglobal = useSelector(GlobalOtherSevices);

  const [Kioskopen, setKioskopen] = useState(false);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [popOverOpen, setPopOverOpen] = useState(false);
  const BookingStatus = useSelector(GlobalBookingStatus);
  const CheckBookingStatus =
    BookingStatus?.find((item) => item.ScreenType === 'Booking')
      ?.ScreenStatus ?? 'Open';
  const [BookingModalOpen, setBookingModalOpen] = useState(false);
  const AppId = SessionData?.AppId;
  const CompId = SessionData?.CompId;
  const BranchId = SessionData?.BranchId;
  const UserId = SessionData?.UserId;
  const UserType = SessionData?.UserType;
  const BookingNavbar = BSLayout2Data?.BookingNavbar?.[0];
  const BookingBilling = BSLayout2Data?.BookingBilling?.[0];
  const DineInAccess = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
    (i) => i.SettingIdName === 'DineIn'
  )?.[0];
  let containerHeight = isMobile
    ? AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
      ? '575px'
      : ''
    : UserType != 'Super Admin' &&
        UserType != 'Super Admin User' &&
        AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
      ? '96vh'
      : '99vh';
  
  const [ListOfInvoices, setListOfInvoices] = useState(false);
  const appPreferences = useSelector(ApplicationPreferences);
  const salespagefields = appPreferences?.find(
    (pref) => pref?.PreferredCatName === 'Sales Page Fields'
  )?.PreferenceCatDetails;
  const AvailableDate = salespagefields?.find(
    (type) =>
      type?.PreferredSubCatName?.toLowerCase() === 'available date' &&
      type?.PreferredStatus === 'Y'
  );
  const commonModulePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Common Module'
  )?.PreferenceCatDetails;
  const sportsAppPreference = commonModulePreference?.find(
    (preference) =>
      preference?.PreferredSubCatName === 'SportsApp' &&
      preference?.PreferredStatus == 'Y'
  );


  useEffect(() => {
    fetchAmount();
    if (
      SessionData?.FeatureAddonData?.FeatureDtls?.find(
        (item) => item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
      )
    ) {
      fetchKioskDatas();
    }
  }, [SessionData]);
  useEffect(() => {
    if (AppId && CompId && BranchId && UserId) {
      fetchBookingStatus();
    }
  }, [AppId, CompId, BranchId, UserId]);
 
  const fetchAmount = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: UserId,
      FromDate: currentDateValue,
      ToDate: currentDateValue,
    };

    await dispatch(getSalesDetailData(data)).unwrap();
  };

  const fetchKioskDatas = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: 0,
    };

    await dispatch(getKioskDatas(data));
  };

  const openModalKiosk = () => {
    setKioskopen(true);
  };

  const closeModalKiosk = () => {
    setKioskopen(false);
  };
  const handlePopOverOpen = () => {
    setPopOverOpen(!popOverOpen);
  };
  const handleSupportUser = async () => {
    let response = await dispatch(
      putSadminUserExit({
        AppId: AppId,
        CompId: CompId,
        BranchId: BranchId,
        UserId: UserId,
        UpdatedBy: UserId,
      })
    ).unwrap();
    if (response?.data?.statusCode == 1) {
      setMessageData('success');
      setMessageType(response?.data?.data);
      setPopOverOpen(false);
      const UserId = getSession('UserId');
      const sessionId = getSession('SessionId');
      await dispatch(checkSession({ UserId, sessionId })).unwrap();
    } else {
      setMessageData('error');
      setMessageType(response?.data?.data);
    }
  };
  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);
  const fetchBookingStatus = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: UserId,
    };
    await dispatch(getBookingStatus(data));
  };
  const BookingOpenFun = async (status) => {
    let Postdata = {
      AppId: AppId,
      CompId: CompId,
      BranchId: BranchId,
      UserId: UserId,
      ScreenType: 'Booking',
      ScreenStatus: status,
      CreatedBy: UserId,
      Date: new Date(),
    };
    let Postresponse = await dispatch(PutBookingClose(Postdata)).unwrap();
    if (Postresponse?.data?.statusCode === 1) {
      fetchBookingStatus();
    }
  };
  const OpenBookingModal = () => {
    setBookingModalOpen(true);
  };
  const HandleBookingModalClose = () => {
    setBookingModalOpen(false);
  };
  const OpenListOfInvoices = () => {
    setListOfInvoices(true);
  };
  const handleInvoiceClose = () => {
    setListOfInvoices(false);
  };
  return (
    <>
      <Messages
        messageType={messageType}
        messageData={messageData}
        onComplete={onComplete}
      />
      <div ref={elementRef} style={{ backgroundColor: '#fff' }}>
        {UserType != 'Super Admin' &&
          UserType != 'Super Admin User' &&
          (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined' || AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
            <Suspense fallback={<div>Loading...</div>}>
              <PlanExpireNotification/>
            </Suspense>
          )}
        <div
          className="BSLayout2-Master"
          style={{ height: containerHeight, overflow: 'hidden' }}
        >
          <Suspense fallback={<div>Loading...</div>}>
            <div className="BSLayout2-NavBar">
              {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
              {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
              {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
            </div>
          </Suspense>
          <div
            // className="BSLayout2"
            className={
              BookingNavbar != 'Navbar3' ? 'BSLayout2Standard' : 'BSLayout2'
            }
          >
            {BookingNavbar != 'Navbar3' ? (
              <div
                className="Layout-bill-container"
                style={{ marginTop: '9px' }}
              >
                <div
                  className="Layout-bill-Subcontainer"
                  style={{ width: OtherServicesglobal ? '10%' : '100%' }}
                >
                  {UserType !== 'Employee' && (
                    <div className="pricing-name-details">
                      {PricingAppPricingName?.[0]?.PricingName +
                        ' / ' +
                        PricingAppPricingName?.[0]?.Type}
                    </div>
                  )}
                  {!OtherServicesglobal && (
                    <Suspense fallback={null}>
                      <SalesCountComponent
                        DineInAccess={DineInAccess}
                        GlobalsalesDetailData={GlobalsalesDetailData}
                      />
                    </Suspense>
                  )}
                  {SessionData?.FeatureAddonData?.FeatureDtls?.find(
                    (item) =>
                      item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
                  ) &&
                    !sportsAppPreference && (
                      <div
                        style={{
                          pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
                          opacity: OrderStatus > 0 ? 0.5 : 1,
                        }}
                      >
                        {!OtherServicesglobal && (
                          <Tooltip title={'Kiosk Sales'}>
                            <Badge
                              count={badgeCount}
                              offset={[-10, 3]}
                              size="small"
                            >
                              <PozoKioskIcon
                                onClick={() => openModalKiosk()}
                                style={{
                                  cursor: 'pointer',
                                  fontSize: '1.5rem',
                                }}
                                className="iconsize"
                              />
                            </Badge>
                          </Tooltip>
                        )}
                      </div>
                    )}
                  {!OtherServicesglobal && (
                    <TooltipWrapper
                      title={'Low Stock Alerts'}
                      isMobile={isMobile}
                    >
                      {' '}
                      <Suspense fallback={<div>Loading...</div>}>
                        <BSExpireProductsList />
                      </Suspense>
                    </TooltipWrapper>
                  )}
                  {Kioskopen && (
                    <Suspense fallback={<div>Loading...</div>}>
                      <BSKioskCounterPayment
                        Kioskopen={Kioskopen}
                        closeKioskModal={closeModalKiosk}
                      />
                    </Suspense>
                  )}

                  {SAdminuserPin?.length > 0 &&
                    UserType != 'Super Admin User' && (
                      <Suspense fallback={<div>Loading...</div>}>
                        <div>
                          <SAdminUserNotification
                            SAdminuserPin={SAdminuserPin}
                            popOverOpen={popOverOpen}
                            handleSupportUser={handleSupportUser}
                            handlePopOverOpen={handlePopOverOpen}
                          />
                        </div>
                      </Suspense>
                    )}
                  {!OtherServicesglobal && (
                    <>
                      {CheckBookingStatus == 'Open' ? (
                        <div style={{ marginLeft: '10px' }}>
                          <TooltipWrapper
                            title={'Booking Close'}
                            isMobile={isMobile}
                          >
                            {' '}
                            <BookingCloseIcon
                              onClick={OpenBookingModal}
                              bgFill={'#52c41a'}
                              style={{
                                fontSize: '16px',
                                marginTop: '4px',
                                color: '#52c41a',
                                cursor: 'pointer',
                              }}
                            />
                          </TooltipWrapper>
                        </div>
                      ) : (
                        <div style={{ marginLeft: '10px' }}>
                          <TooltipWrapper
                            title="Booking Open"
                            isMobile={isMobile}
                          >
                            <Popconfirm
                              placement="leftTop"
                              title="Booking Open"
                              description="Are you sure you want to Open the sales?"
                              okText="Yes"
                              cancelText="No"
                              onConfirm={() => BookingOpenFun('Open')}
                            >
                              <span>
                                <BookingCloseIcon
                                  bgFill="red"
                                  style={{
                                    fontSize: '16px',
                                    marginTop: '4px',
                                    color: '#52c41a',
                                    cursor: 'pointer',
                                  }}
                                />
                              </span>
                            </Popconfirm>
                          </TooltipWrapper>
                        </div>
                      )}
                      <div style={{ marginLeft: '10px' }}>
                        <TooltipWrapper
                          title={'E-way Bill'}
                          isMobile={isMobile}
                        >
                          {''}
                          <BSEwayBillicon
                            style={{ cursor: 'pointer', marginTop: '5px' }}
                            onClick={OpenListOfInvoices}
                          />
                        </TooltipWrapper>
                      </div>
                    </>
                  )}
                </div>
              </div>
            ) : (
              <Suspense fallback={null}>
                <SalesCountForStandard
                  PricingAppPricingName={PricingAppPricingName}
                  DineInAccess={DineInAccess}
                  GlobalsalesDetailData={GlobalsalesDetailData}
                />
              </Suspense>
            )}

            <div
              className="BsLayout2-ContentDiv"
              style={{
                backgroundColor:
                  GlobalLayoutColorDetail?.OverallBackgroundColor,
                height:
                  PricingAppPricingName?.[0]?.PricingName == 'Standard'
                    ? '100vh'
                    : ' ',
              }}
            >
              <div className="BSCategory2-Contentcont">
                <div
                  style={{
                    backgroundColor:
                      SelectedCatgColor?.['OverallBackgroundColor'],
                  }}
                >
                  {!OtherServicesglobal && (
                    <Suspense fallback={<div>Loading...</div>}>
                      <CategoryHorizontal
                        categoryFunction={dynamicComponentProps(
                          'Category',
                          BSLayout2Data?.BookingCategory?.[1],
                          BSLayout2Data?.BookingCategory?.[0]
                        )}
                      />
                    </Suspense>
                  )}
                  {OtherServicesglobal && (
                    <Suspense fallback={<div>Loading...</div>}>
                      <BSOtherServicesHorizontalcat
                        categoryFunction={dynamicComponentProps(
                          'Category',
                          BSLayout2Data?.BookingCategory?.[1],
                          BSLayout2Data?.BookingCategory?.[0]
                        )}
                      />
                    </Suspense>
                  )}
                </div>
                <div
                  className="BSCategory2-Cardcont"
                  style={{
                    backgroundColor:
                      SelectedCardColor?.['OverallBackgroundColor'],
                    display: 'flex',
                  }}
                >
                  {Comboglobal === false &&
                    !OtherServicesglobal &&
                    (AvailableDate ? (
                      <BsBookingitemCard
                        cardFunctionality={dynamicComponentProps(
                          'Card',
                          BSLayout2Data?.BookingCard?.[1],
                          BSLayout2Data?.BookingCard?.[0]
                        )}
                      />
                    ) : (
                      <BSItemCard
                        cardFunctionality={dynamicComponentProps(
                          'Card',
                          BSLayout2Data?.BookingCard?.[1],
                          BSLayout2Data?.BookingCard?.[0]
                        )}
                      />
                    ))}
                  {Comboglobal === true && !OtherServicesglobal && (
                    <Suspense fallback={null}>
                      <BSComboItemCard
                        cardFunctionality={dynamicComponentProps(
                          'Card',
                          BSLayout2Data?.BookingCard?.[1],
                          BSLayout2Data?.BookingCard?.[0]
                        )}
                      />
                    </Suspense>
                  )}
                  {OtherServicesglobal && (
                    <Suspense fallback={null}>
                      <BSOtherServiceItemCard
                        // screenHeight={screenHeight}
                        cardFunctionality={dynamicComponentProps(
                          'Card',
                          BSLayout2Data?.BookingCard?.[1],
                          BSLayout2Data?.BookingCard?.[0]
                        )}
                      />
                    </Suspense>
                  )}
                </div>
              </div>
              {/* {PricingAppPricingName?.[0]?.PricingName != 'Standard' ? ( */}
              <Suspense fallback={<div>Loading...</div>}>
                <div className="BSCategory2-tablecont">
                  {action ? (
                    <BranchTransferComponent />
                  ) : (
                    <Suspense fallback={<div>Loading...</div>}>
                      <>
                        {BSLayout2Data?.BookingBilling?.[0] == 'Billing1' && (
                          <BSBillingTable1 />
                        )}
                        {BSLayout2Data?.BookingBilling?.[0] == 'Billing2' && (
                          <BSBillingTable2 />
                        )}
                        {BSLayout2Data?.BookingBilling?.[0] == 'Billing3' && (
                          <BSBillingTable3 />
                        )}
                        {BSLayout2Data?.BookingBilling?.[0] == 'Billing4' && (
                          <BSBillingTable4 />
                        )}
                        {BSLayout2Data?.BookingBilling?.[0] == 'Billing5' && (
                          <BSBillingTable5 />
                        )}
                        {BSLayout2Data?.BookingBilling?.[0] == 'Billing6' && (
                          <BSBillingTable6 />
                        )}
                        {BSLayout2Data?.BookingBilling?.[0] == 'Billing7' && (
                          <BSBillingTable7 />
                        )}

                        {BookingBilling == 'Billing8' && (
                          <ComboSalesBillTable />
                        )}
                        {BSLayout2Data?.BookingBilling?.[0] ==
                          'StandardBilling' && (
                          <div className="BSCategory2New">
                            <Suspense fallback={<div>Loading table...</div>}>
                              <StandardTable />
                            </Suspense>
                          </div>
                        )}
                      </>
                    </Suspense>
                  )}
                </div>
              </Suspense>
            </div>
          </div>
        </div>
      </div>
      {BookingModalOpen && (
        <Suspense fallback={null}>
          <RetailBookingClosing
            PaymentOpen={BookingModalOpen}
            PaymentClose={HandleBookingModalClose}
          />
        </Suspense>
      )}
      {ListOfInvoices && (
        <Suspense fallback={<div>Loading...</div>}>
          <ListOfSalesInvoices
            ListOfInvoicesOpen={ListOfInvoices}
            handleInvoiceClose={handleInvoiceClose}
          />
        </Suspense>
      )}
    </>
  );
};

export default BSLayout2;