import React from 'react';
import { useSelector } from 'react-redux';
import BSBilling4Payment from './BSBilling4Payment';
import { getTemplateData } from '../../../../../Features/ThemeChange/ThemeChange';
import { isMobile } from 'react-device-detect';
import { GlobalExpDateforHeight } from '../../../../../Features/BookingScreen/BookingData/BookingData';
import BSBillingTable3 from '../BSBillingTable3/BSBillingTable3';

const BSBillingTable4Full = () => {
  const templateData = useSelector(getTemplateData);
  const ExpDate = useSelector(GlobalExpDateforHeight);
  let containerHeight = '';

  if (templateData?.BookingLayout?.[0] === 'Layout1') {
    containerHeight = isMobile
      ? ExpDate <= 7
        ? '480px'
        : '470px' //billing table 4 height in POS -- Layout 1
      : ExpDate <= 7
        ? '82vh'
        : '';
  } else if (templateData?.BookingLayout?.[0] === 'Layout5') {
    containerHeight = isMobile
      ? ExpDate <= 7
        ? '480px'
        : '475px'
      : ExpDate <= 7
        ? '85vh'
        : '';
  } else if (templateData?.BookingLayout?.[0] === 'Layout6') {
    containerHeight = isMobile
      ? ExpDate <= 7
        ? '420px'
        : '410px'
      : ExpDate <= 7
        ? '72.5vh'
        : '';
  } else if (templateData?.BookingLayout?.[0] === 'Layout4') {
    containerHeight = isMobile
      ? ExpDate <= 7
        ? '500px'
        : '475px'
      : ExpDate <= 7
        ? '85vh'
        : '';
  } else if (templateData?.BookingLayout?.[0] === 'Layout2') {
    containerHeight = isMobile
      ? ExpDate <= 7
        ? '490px'
        : '475px' // billing table 4 height in POS -- Layout 2
      : ExpDate <= 7
        ? '84vh'
        : '';
  } else if (templateData?.BookingLayout?.[0] === 'Layout3') {
    containerHeight = isMobile
      ? ExpDate <= 7
        ? '480px'
        : '460px'
      : ExpDate <= 7
        ? '82vh'
        : '';
  }

  return (
    <>
      <div
        className={
          templateData?.BookingLayout?.[0] === 'Layout6'
            ? 'BSBilling4TableCont-default BSBilling4TableCont-default-6'
            : 'BSBilling4TableCont-default'
        }
        style={{ height: containerHeight }}
      >
        <div className="BSBillingDefault-table">
          <BSBillingTable3 />
        </div>

        <div className="BSBilling4-down-content">
          <BSBilling4Payment />
        </div>
      </div>
    </>
  );
};
export default BSBillingTable4Full;