import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {
  changefocusStatusBalrec,
  GlobalFailedTotalAmt,
  GlobalOrderCardDetails,
  PreferenceData,
} from '../../../../../Features/BookingScreen/BookingData/BookingData';
import { GlobalSelectedFont } from '../../../../../Features/ThemeChange/ThemeChange';
import CountUp from 'react-countup';
import '../../../../../Styles/BookingScreen/Components/BSBillingTables/BSBillingTable1/BSBPayment.scss';
import { useAuth } from '../../../../../AuthContext';
import TooltipWrapper from '../../../../../Components/Tooltip/Tooltip';
import { isMobile } from 'react-device-detect';
import { getSession } from '../../../../../Services/Others';

const PaymentInput = ({
  orderType,
  totalAmount,
  orderCardDetail,
  empData,
  FirstPaymentclick,
  paybtnselected,
  OrderStatus,
  qrCode,
  SelectedUPIPayOption,
  BookingType,
  isMobile,
  OrderType,
  UpiPayment,
  AddBookingDetails,
  handleButtonClick,
  BillingTableName,
  CheckBookingStatus,
  salesBillEdit = false,
  currentOrderNetAmount = 0,
  previousNetAmount = 0,
  credit = false,
  overAllBal = 0,
}) => {
  const { SadminuserAccess } = useAuth();
  let SAAccessCommonMaster = SadminuserAccess?.find(
    (e) => e?.MenuName === 'Sales'
  );
  const failedTotalAmt = useSelector(GlobalFailedTotalAmt);
  const FontFamily = useSelector(GlobalSelectedFont);
  const OrderCardDetail = useSelector(GlobalOrderCardDetails);
  const dispatch = useDispatch();
  const [error, setError] = useState(false);
  const [addnewAccess, setaddnewAccess] = useState(true);
  const UserType = getSession('UserType');
  const preferenceDatas = useSelector(PreferenceData);
  const allowDecimal = preferenceDatas?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "decimal" && setting?.SettingValue === 'Y');

  useEffect(() => {
    const receivedInput = document.getElementById('recived');
    if (receivedInput) {
      const receivedValue = receivedInput.value;
      if (
        receivedValue.trim() === '' ||
        receivedValue === null ||
        receivedValue > 0
      )
        receivedInput.value = '';
    }
    if (totalAmount <= 0 || totalAmount > receivedInput.value) {
      document.getElementById('recived').value = ' ';
      document.getElementById('balance').value = '';
      changeSearchInactive();
    }
    setError(false);
  }, [OrderCardDetail, totalAmount]);
  useEffect(() => {
    let hasAccess = false;

    if (UserType === 'Admin' || UserType === 'Super Admin') {
      hasAccess = true;
    } else if (UserType === 'Employee') {
      hasAccess = empData?.AddAccess === 'Y';
    } else if (UserType === 'Super Admin User') {
      hasAccess = SAAccessCommonMaster?.AddAccess === 'Y';
    }

    setaddnewAccess(!hasAccess);
  }, [empData, SAAccessCommonMaster, UserType]);
  const handleBlur = async () => {
    await dispatch(changefocusStatusBalrec(false));
  };

  const changeSearchInactive = async () => {
    await dispatch(changefocusStatusBalrec(true));
  };

  const handleBalanceCalculation = (receivedValue) => {
    const parsedValue = parseInt(receivedValue, 10);
    const total = Math.round(
      orderType === 'Failed' ? failedTotalAmt : totalAmount
    );

    if (total <= parsedValue && total !== 0) {
      document.getElementById('balance').value = parsedValue - total;
    } else {
      document.getElementById('balance').value = '';
    }
    setError(total > parsedValue);
  };

  function safeRound(amountStr) {
    if (amountStr == null) return allowDecimal ? '0.00' : '0';

    const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
    const num = Number(cleaned);

    if (isNaN(num)) return allowDecimal ? '0.00' : '0';

    return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
  }

  return (
    <>
      {BillingTableName === 'BillingTable1' && (
        <div className="payment-div">
          <input
            id="recived"
            className={error ? 'received-button1' : 'received-button'}
            style={{ fontFamily: FontFamily?.para }}
            placeholder="Received"
            type="number"
            onChange={(e) => handleBalanceCalculation(e?.target?.value)}
            onMouseLeave={handleBlur}
            onMouseEnter={changeSearchInactive}
            disabled={OrderCardDetail?.length < 1}
          />
          <TooltipWrapper title="Create Bill (F4)" isMobile={isMobile}>
            <button
              className={
                // (empData?.AddAccess === "N" || SAAccessCommonMaster?.AddAccess === "N")
                addnewAccess
                  ? 'price-button-disabled'
                  : FirstPaymentclick === false &&
                    OrderCardDetail?.length > 0 &&
                    paybtnselected &&
                    CheckBookingStatus != 'Close'
                    ? !OrderStatus
                      ? 'price-button'
                      : 'price-button Order'
                    : 'price-button-disabled'
              }
              onClick={handleButtonClick}
              // onClick={() => {
              //   qrCode && SelectedUPIPayOption === "Default"
              //     ? UpiPayment()
              //     : OrderStatus
              //       ? AddBookingDetails("Dine-In")
              //       : AddBookingDetails(BookingType, true);
              // }}
              style={{ fontFamily: FontFamily['head'] }}
            >
              {isMobile &&
                (!OrderStatus ? salesBillEdit && (currentOrderNetAmount < previousNetAmount) ? <div>Refund: ₹{(previousNetAmount || 0) - (currentOrderNetAmount || 0)}</div> :
                  `₹ ${Math.round(
                    OrderType === 'Failed' ? failedTotalAmt : credit && overAllBal >= 0
                      ? Math.max(0, totalAmount - overAllBal)
                      : totalAmount
                  )}`
                  : 'ORDER')}

              {!isMobile && !OrderStatus && ((salesBillEdit && (currentOrderNetAmount < previousNetAmount)) ? <div>Refund: ₹{(previousNetAmount || 0) - (currentOrderNetAmount || 0)}</div> : (
                <>
                  ₹{' '}
                  {/* <CountUp
                duration={0.4}
                className="counter"
                end={(
                  OrderType === "Failed" ? failedTotalAmt : safeRound(totalAmount)
                )}
              /> */}
                  {OrderType === 'Failed'
                    ? failedTotalAmt
                    : safeRound((credit && overAllBal >= 0)
                      ? Math.max(0, totalAmount - overAllBal)
                      : totalAmount)}
                </>
              ))}

              {!isMobile && OrderStatus && 'ORDER'}
            </button>
          </TooltipWrapper>
          <input
            id="balance"
            className="Balance-button"
            style={{ fontFamily: FontFamily?.para }}
            placeholder="Balance"
            disabled
          />
        </div>
      )}
      {BillingTableName === 'BillingTable6' && (
        <>
          <input
            id="recived"
            className={
              error == true
                ? 'BST6Payment-Button-RECIEVED1'
                : 'BST6Payment-Button-RECIEVED'
            }
            onChange={(e) => handleBalanceCalculation(e?.target?.value)}
            placeholder="RECEIVED"
            type="number"
            style={{ fontFamily: FontFamily['para'] }}
            onMouseLeave={() => handleBlur()}
            onMouseEnter={() => changeSearchInactive()}
          />
          <input
            id="balance"
            className="BST6Payment-Button-BALANCE"
            placeholder="BALANCE"
            type="number"
            style={{ fontFamily: FontFamily['para'] }}
            disabled
          />
        </>
      )}
    </>
  );
};

export default React.memo(PaymentInput);