import { lazy, Suspense, useCallback, useEffect, useState } 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 BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
const CategoryHorizontal = lazy(
  () => import('../../Components/BSCategories/BSCategoryHorizontal')
);
const BSItemCard = lazy(
  () => import('../../Components/BSItemCards/BSItemCard')
);

const BSBillingTable2 = lazy(
  () =>
    import('../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2')
);

import BSBillingTable3 from '../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall';

import { dynamicComponentProps } from '../DynamicComponentProps.js';
import {
  getTemplateData,
  GlobalPricingAppPricingName,
  SelectedGlobalBillingColorDetail,
  SelectedGlobalCardColorDetail,
  SelectedGlobalCatgColorDetail,
  SelectedGlobalLayoutColorDetail,
  StoredSessionData,
} 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 BSKioskCounterPayment from '../../Components/UtillComponents/BSKioskCounterPayment.jsx';
import {
  getKioskDatas,
  globalKioskSalesCount,
} from '../../../../Features/Kiosk/kiosk.js';
import PozoKioskIcon from '../../Components/UtillComponents/Pozo retail icons/PozoKioskIcon.jsx';
import {
  GLobalSadminUserPin,
  putSadminUserExit,
  checkSession,
  ApplicationPreferences,
} from '../../../../Features/BrachLogin/BranchLogin';
import { Messages } from '../../../../Components/Notifications/Messages.jsx';
import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
const SalesCountComponent = lazy(() => import('../SalesCountComponent.jsx'));
import {
  getBookingStatus,
  GlobalBookingStatus,
} from '../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
const RetailBookingClosing = lazy(() => import('../RetailBookingClose.jsx'));

const ListOfSalesInvoices = lazy(
  () =>
    import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
);

const BSEwayBillicon = lazy(
  () => import('../../Components/UtillComponents/BSEwayBillicon.jsx')
);

const BSComboItemCard = lazy(
  () => import('../../Components/BSItemCards/BSComboItemCard.jsx')
);

const BranchTransferComponent = lazy(
  () =>
    import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
);

const BSExpireProductsList = lazy(
  () => import('../../Components/UtillComponents/BSExpireProductsList.jsx')
);

const BSOtherServiceItemCard = lazy(
  () => import('../../Components/BSItemCards/BSOtherServiceItemCard.jsx')
);

const BSOtherServicesVerticalcat = lazy(
  () => import('../../Components/BSCategories/BSOtherServicesVerticalcat.jsx')
);

const SalesCountForStandard = lazy(
  () => import('../SalesCountForStandard.jsx')
);

const ComboSalesBillTable = lazy(
  () =>
    import('../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx')
);
import PlanExpireNotification from '../PlanExpireNotification.jsx';
// Scss
import '../../../../Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss';
import CardSkeleton from '../../../../Components/Skeleton/CardSkeleton.jsx';

const subDirectory = import.meta.env.BASE_URL;
const commonDirectory = import.meta.env.COMMON_BASE_URL;

const BSLayout4 = () => {
  const dispatch = useDispatch();
  const BSLayout4Data = useSelector(getTemplateData);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const SettingDataSelector = useSelector(PreferenceData);
  const { action, selectedProducts } = useSelector(
    GlobalBtoBQuickProductTransfer
  );
  const OtherServicesglobal = useSelector(GlobalOtherSevices);
  const GlobalsalesDetailData = useSelector(GlobalSalesDetailData);
  const GlobalLayoutColorDetail = useSelector(SelectedGlobalLayoutColorDetail);
  const SelectedCatgColor = useSelector(SelectedGlobalCatgColorDetail);
  const SelectedCardColor = useSelector(SelectedGlobalCardColorDetail);
  const Comboglobal = useSelector(GlobalCombosearch);
  const OrderStatus = useSelector(GlobalOrderStatus);
  const SessionData = useSelector(StoredSessionData);
  const badgeCount = useSelector(globalKioskSalesCount);
  const SAdminuserPin = useSelector(GLobalSadminUserPin);
  const AppExpDate = useSelector(GlobalAppExpDateData);
  const PricingAppPricingName = useSelector(GlobalPricingAppPricingName);
  const [popOverOpen, setPopOverOpen] = useState(false);

  const SelectedBillColor = useSelector(SelectedGlobalBillingColorDetail);
  const appPreferences = useSelector(ApplicationPreferences);
  const commonModulePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Common Module'
  )?.PreferenceCatDetails;
  const sportsAppPreference = commonModulePreference?.find(
    (preference) =>
      preference?.PreferredSubCatName === 'SportsApp' &&
      preference?.PreferredStatus == 'Y'
  );
  // const [AppExpDate, setAppExpDate] = useState(0);
  const [Kioskopen, setKioskopen] = useState(false);
  const [connectingState, setConnectingState] = useState({});
  const BookingStatus = useSelector(GlobalBookingStatus);
  const CheckBookingStatus =
    BookingStatus?.find((item) => item.ScreenType === 'Booking')
      ?.ScreenStatus ?? 'Open';
  const [BookingModalOpen, setBookingModalOpen] = useState(false);
  const BookingNavbar = BSLayout4Data?.BookingNavbar?.[0];
  const BookingCategory = BSLayout4Data?.BookingCategory;
  const BookingCard = BSLayout4Data?.BookingCard;
  const BookingBilling = BSLayout4Data?.BookingBilling?.[0];
  console.log('BSLayout4Data', BookingBilling);
  const DineInAccess = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
    (i) => i.SettingIdName === 'DineIn'
  )?.[0];
  const AppId = SessionData?.AppId;
  const CompId = SessionData?.CompId;
  const BranchId = SessionData?.BranchId;
  const UserId = SessionData?.UserId;
  const UserType = SessionData?.UserType;
  const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
  let containerHeight = isMobile
    ? AppExpDate?.RemainingDays <= 7 ||
      AppExpDate?.PlanType?.toLowerCase() === 'extend'
      ? '575px'
      : '590px'
    : (UserType != 'Super Admin' &&
          UserType != 'Super Admin User' &&
          AppExpDate?.RemainingDays <= 7) ||
        AppExpDate?.PlanType?.toLowerCase() === 'extend'
      ? '96vh'
      : '99vh';
  const [ListOfInvoices, setListOfInvoices] = useState(false);

  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 OpenListOfInvoices = () => {
    setListOfInvoices(true);
  };
  const handleInvoiceClose = () => {
    setListOfInvoices(false);
  };
  const fetchKioskDatas = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: 0,
    };

    await dispatch(getKioskDatas(data));
  };

  const fetchAmount = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: UserId,
      FromDate: currentDateValue,
      ToDate: currentDateValue,
    };

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

  const fetchBookingStatus = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: UserId,
    };
    await dispatch(getBookingStatus(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 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();
    } else {
    }
  };
  const OpenBookingModal = () => {
    setBookingModalOpen(true);
  };
  const HandleBookingModalClose = () => {
    setBookingModalOpen(false);
  };
  return (
    <Suspense fallback={<CardSkeleton />}>
      <>
        <Messages
          messageType={messageType}
          messageData={messageData}
          onComplete={onComplete}
        />
        {UserType != 'Super Admin' &&
          UserType != 'Super Admin User' &&
          (AppExpDate?.RemainingDays <= 7 ||
            AppExpDate === 'undefined' ||
            AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
            <PlanExpireNotification />
          )}
        <div
          className="BsLayout4-Master"
          style={{ height: containerHeight, overflow: 'hidden' }}
        >
          <div className="Bslayout4_navbar">
            <BSNavbar1
              connectingState={connectingState}
              setConnectingState={setConnectingState}
              BookingNavbar={BookingNavbar}
            />
          </div>

          <div className="Layout-bill-container">
            <div
              className={
                BookingNavbar === 'Navbar3'
                  ? 'Layout-IfNavbar3'
                  : 'Layout-bill-Subcontainer'
              }
              style={{ width: OtherServicesglobal ? '10%' : '100%' }}
            >
              {UserType !== 'Employee' && (
                <div className="pricing-name-details">
                  {PricingAppPricingName?.[0]?.PricingName +
                    ' / ' +
                    PricingAppPricingName?.[0]?.Type}
                </div>
              )}
              {!OtherServicesglobal && (
                <SalesCountComponent
                  DineInAccess={DineInAccess}
                  GlobalsalesDetailData={GlobalsalesDetailData}
                  BookingNavbar={BookingNavbar}
                />
              )}
              {!OtherServicesglobal &&
                SessionData?.FeatureAddonData?.FeatureDtls?.find(
                  (item) =>
                    item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
                ) &&
                !sportsAppPreference && (
                  <div
                    style={{
                      pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
                      opacity: OrderStatus > 0 ? 0.5 : 1,
                    }}
                  >
                    <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}>
                  {' '}
                  <BSExpireProductsList />
                </TooltipWrapper>
              )}
              {!OtherServicesglobal && Kioskopen && (
                <BSKioskCounterPayment
                  Kioskopen={Kioskopen}
                  closeKioskModal={closeModalKiosk}
                />
              )}
              {SAdminuserPin?.length > 0 && UserType != 'Super Admin User' && (
                <div>
                  <SAdminUserNotification
                    SAdminuserPin={SAdminuserPin}
                    popOverOpen={popOverOpen}
                    handleSupportUser={handleSupportUser}
                    handlePopOverOpen={handlePopOverOpen}
                  />
                </div>
              )}
              {CheckBookingStatus == 'Open' ? (
                !OtherServicesglobal && (
                  <div style={{ marginLeft: '10px' }}>
                    <TooltipWrapper title={'Booking Close'} isMobile={isMobile}>
                      {' '}
                      <BookingCloseIcon
                        onClick={OpenBookingModal}
                        bgFill={'#52c41a'}
                        style={{
                          fontSize: '16px',
                          marginTop: '4px',
                          color: '#52c41a',
                          cursor: 'pointer',
                        }}
                      />
                      {/* <button className="BookingCloseButton"
                                        >Booking Close</button> */}
                    </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>
              )}
              {!OtherServicesglobal && (
                <div style={{ marginLeft: '10px' }}>
                  <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
                    {''}
                    <BSEwayBillicon
                      style={{ cursor: 'pointer', marginTop: '5px' }}
                      onClick={OpenListOfInvoices}
                    />
                  </TooltipWrapper>
                </div>
              )}
            </div>
          </div>

          <div
            className="Bslayout4_overall"
            style={{
              backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
            }}
          >
            {/* <div className="BSlayout_subdiv"> */}
            <div
              className={
                BookingCategory?.[0] === 'Category5'
                  ? 'bslayout4Cat5Flex'
                  : 'BSlayout_subdiv'
              }
            >
              <div
                className="Bslayout4_ctg"
                style={{
                  backgroundColor:
                    SelectedCatgColor?.['OverallBackgroundColor'],
                }}
              >
                {!OtherServicesglobal && (
                  <CategoryHorizontal
                    categoryFunction={dynamicComponentProps(
                      'Category',
                      BookingCategory?.[1],
                      BookingCategory?.[0]
                    )}
                    categoryType={'vertical'}
                  />
                )}
                {OtherServicesglobal && (
                  <BSOtherServicesVerticalcat
                    categoryFunction={dynamicComponentProps(
                      'Category',
                      BookingCategory?.[1],
                      BookingCategory?.[0]
                    )}
                  />
                )}
              </div>
              <div
                className="Bslayout4_card"
                style={{
                  backgroundColor:
                    SelectedCardColor?.['OverallBackgroundColor'],
                  width: '100vw',
                  display: 'flex',
                }}
              >
                {!OtherServicesglobal && Comboglobal === false && (
                  <BSItemCard
                    connectingState={connectingState}
                    setConnectingState={setConnectingState}
                    cardFunctionality={dynamicComponentProps(
                      'Card',
                      BookingCard?.[1],
                      BookingCard?.[0]
                    )}
                  />
                )}
                {!OtherServicesglobal && Comboglobal === true && (
                  <BSComboItemCard
                    cardFunctionality={dynamicComponentProps(
                      'Card',

                      BookingCard?.[1],
                      BookingCard?.[0]
                    )}
                  />
                )}
                {OtherServicesglobal && (
                  <BSOtherServiceItemCard
                    screenHeight={window.innerHeight}
                    cardFunctionality={dynamicComponentProps(
                      'Card',
                      BookingCard?.[1],
                      BookingCard?.[0]
                    )}
                  />
                )}
              </div>
            </div>
            <div className="Bslayout4_table">
              {action ? (
                <BranchTransferComponent />
              ) : (
                <>
                  {(BSLayout4Data?.BookingBilling?.[0] === 'Billing1' ||
                    BSLayout4Data?.BookingBilling?.[0] === 'Billing3' ||
                    BSLayout4Data?.BookingBilling?.[0] === 'Billing4' ||
                    BSLayout4Data?.BookingBilling?.[0] === 'Billing5' ||
                    BSLayout4Data?.BookingBilling?.[0] === 'Billing6' ||
                    BSLayout4Data?.BookingBilling?.[0] === 'Billing7') && (
                    <BSBillingTable3 />
                  )}

                  {BSLayout4Data?.BookingBilling?.[0] === 'Billing2' && (
                    <BSBillingTable2 />
                  )}

                  {BSLayout4Data?.BookingBilling?.[0] === 'Billing8' && (
                    <ComboSalesBillTable />
                  )}

                  {BSLayout4Data?.BookingBilling?.[0] === 'StandardBilling' && (
                    <div className="BSCategory2New">
                      <BSBillingTable3 />
                    </div>
                  )}
                </>
              )}
            </div>
          </div>
        </div>
        {BookingModalOpen && !OtherServicesglobal && (
          <RetailBookingClosing
            PaymentOpen={BookingModalOpen}
            PaymentClose={HandleBookingModalClose}
          />
        )}
        {ListOfInvoices && !OtherServicesglobal && (
          <ListOfSalesInvoices
            ListOfInvoicesOpen={ListOfInvoices}
            handleInvoiceClose={handleInvoiceClose}
          />
        )}
      </>
    </Suspense>
  );
};

export default BSLayout4;