Android_Retail/src/Pages/BookingScreen/Components/BSBillingTables/BSBillingEditQuantity/WeightCalculatePrice.jsx

import { useState, useEffect, useRef } from 'react';
import { InputField } from '../../../../../Components/Forms/InputField.jsx';
import { Form, Radio } from 'antd';
import Buttons from '../../../../../Components/Forms/Buttons.jsx';
import { ArrowRightOutlined } from '@ant-design/icons';
import "./WeightCalculatePrice.scss"

const WeightCalculatePrice = ({ itemData, CartOrderDetails, onSubmit }) => {
  const [enteredPrice, setEnteredPrice] = useState('');
  const [enteredQty, setEnteredQty] = useState('');
  const [calculatedQty, setCalculatedQty] = useState(0);
  const [calcMode, setCalcMode] = useState('amt');

  const priceInputRef = useRef(null);
  const [form] = Form.useForm();

  const basePrice = parseFloat(
    itemData?.OrderRate || itemData?.SellingPrice || 0
  );

  // Auto focus input
  useEffect(() => {
    setTimeout(() => {
      const input = priceInputRef.current?.querySelector('input');
      if (input) input.focus();
    }, 100);
  }, [calcMode]);

  // AMT → calculate QTY
  const handlePriceChange = (e) => {
    const value = e.target.value;
    setEnteredPrice(value);

    if (value && basePrice > 0) {
      const qty = parseFloat(value) / basePrice;
      setCalculatedQty(qty);
    } else {
      setCalculatedQty(0);
    }
  };

  // KGS → calculate AMT
  const handleQtyChange = (e) => {
    const value = e.target.value;
    setEnteredQty(value);

    if (value && basePrice > 0) {
      const qty = parseFloat(value);
      const price = qty * basePrice;
      setEnteredPrice(price.toFixed(2));
      setCalculatedQty(qty);
    } else {
      setEnteredPrice('');
      setCalculatedQty(0);
    }
  };

  const handleSubmit = (e) => {
    if (e && e.preventDefault) e.preventDefault();

    if (calculatedQty > 0 && enteredPrice > 0) {
      onSubmit?.({
        price: parseFloat(enteredPrice),
        quantity: parseFloat(calculatedQty),
      });
    }
  };

  return (
    <div className="weight-calculate-price">
      <Form form={form} onFinish={handleSubmit}>
        {/* MODE SELECTION */}
        <div className="weight-info">
          <div className="productils">
            <Radio.Group
              value={calcMode}
              onChange={(e) => {
                setCalcMode(e.target.value);
                setEnteredPrice('');
                setEnteredQty('');
                setCalculatedQty(0);
                form.resetFields();
              }}
            >
              <Radio.Button value="amt">AMT</Radio.Button>
              <Radio.Button value="kgs">KGS</Radio.Button>
            </Radio.Group>

            <p>
              <strong>Base Price:</strong> ₹{basePrice.toFixed(2)} per{' '}
              {itemData?.UomName || 'unit'}
            </p>
          </div>
        </div>

        {/* AMOUNT INPUT */}
        {calcMode === 'amt' && (
          <Form.Item
            name="enteredPrice"
            rules={[
              { required: true, message: 'Please enter amount' },
              { pattern: /^[1-9]\d*(\.\d+)?$/, message: 'Invalid amount' },
            ]}
          >
            <InputField
              ref={priceInputRef}
              label="Enter Amount (₹)"
              value={enteredPrice}
              onChange={handlePriceChange}
              inputMode="decimal"
              onInput={(e) => {
                e.target.value = e.target.value.replace(/[^0-9.]/g, '');
              }}
            />
          </Form.Item>
        )}

        {/* QUANTITY INPUT */}
        {calcMode === 'kgs' && (
          <Form.Item
            name="enteredQty"
            rules={[
              { required: true, message: 'Please enter quantity' },
              { pattern: /^\d*(\.\d+)?$/, message: 'Invalid quantity' },
            ]}
          >
            <InputField
              ref={priceInputRef}
              label={`Enter Quantity (${itemData?.UomName || 'KGS'})`}
              value={enteredQty}
              onChange={handleQtyChange}
              inputMode="decimal"
              onInput={(e) => {
                e.target.value = e.target.value.replace(/[^0-9.]/g, '');
              }}
            />
          </Form.Item>
        )}
        <div className="calculated-quantity-display">
          <div className="quantity-row">
            <label>Calculated Quantity : </label>
            <span>
              {calculatedQty > 0 ? calculatedQty.toFixed(3) : '0.000'}{' '}
              {itemData?.UomName || 'units'}
            </span>
          </div>

          {enteredPrice > 0 && (
            <div className="total-display">
              <label>Total Amount:</label>
              <span>₹{parseFloat(enteredPrice).toFixed(2)}</span>
            </div>
          )}
        </div>
        <div className="weightCalBTN">
          <Buttons
            buttonText="Apply"
            color="901D77"
            htmlType="button"
            handleSubmit={handleSubmit}
            icon={<ArrowRightOutlined />}
          />
        </div>
      </Form>
    </div>
  );
};

export default WeightCalculatePrice;