Android_Retail/src/Pages/BookingScreen/Components/BookingFunctionality/BSEstModal.jsx

import { useEffect, useState } from 'react';
import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
import Buttons from '../../../../Components/Forms/Buttons';
import { ArrowRightOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from 'react-redux';
import {
  GlobalOrderCardDetails,
  changeSelProdWiseEst,
  GlobalSelProdWiseEst,
  ChangeOverAllDiscSales,
  ChangeOverAllDiscEstimate,
} from '../../../../Features/BookingScreen/BookingData/BookingData';
import { Tables } from '../../../../Components/Tables/Table';
import { Space, Checkbox } from 'antd';

const BSEstimateModal = (props) => {
  const dispatch = useDispatch();
  const [EstModalOpen, setEstModalOpen] = useState(props.EstModalOpen);
  const OrderCardDetails = useSelector(GlobalOrderCardDetails);
  const [SelectedEstProduct, setSelectedEstProduct] = useState([]);
  const tableDataTakeAway = OrderCardDetails?.filter(
    (a, b) => a.BookingTypeName === 'TakeAway'
  );
  const GlobalselProdEst = useSelector(GlobalSelProdWiseEst);
  console.log(GlobalselProdEst, 'GlobalselProdEst');
  useEffect(() => {
    setEstModalOpen(props.EstModalOpen);
    if (GlobalselProdEst?.length === 0) {
      setSelectedEstProduct([]);
    } else {
      setSelectedEstProduct(GlobalselProdEst);
    }
  }, [props.EstModalOpen]);
  useEffect(() => {
    if (GlobalselProdEst?.length === 0) {
      setSelectedEstProduct([]);
    } else {
      setSelectedEstProduct(GlobalselProdEst);
    }
  }, [GlobalselProdEst]);
  const SelEstProduct = (record) => {
    if (
      SelectedEstProduct?.includes(
        record.InwardDtlId + ' ' + record?.BookingTypeName
      )
    ) {
      let uncheck = SelectedEstProduct?.filter(
        (item) => item !== record.InwardDtlId + ' ' + record?.BookingTypeName
      );
      setSelectedEstProduct(uncheck);
    } else {
      setSelectedEstProduct([
        ...SelectedEstProduct,
        record?.InwardDtlId + ' ' + record?.BookingTypeName,
      ]);
    }
  };

  const columns = [
    {
      title: 'Sl.No',
      key: 'sno',
      align: 'center',
      width: '100px',
      render: (text, object, index) => (
        <a style={{ color: 'black' }}>{index + 1}</a>
      ),
    },
    {
      title: 'Product Name',
      dataIndex: 'ProdName',
      key: 'ProdName',
      width: '100px',
    },
    {
      title: 'Action',
      key: 'Action',
      dataIndex: 'Action',
      width: '80px',
      render: (text, record) => (
        <Space size="middle">
          <Checkbox
            checked={
              SelectedEstProduct?.includes(
                record.InwardDtlId + ' ' + record?.BookingTypeName
              )
                ? true
                : false
            }
            onClick={() => SelEstProduct(record)}
          />
        </Space>
      ),
    },
  ];
  const HandleSelectedEst = () => {
    dispatch(changeSelProdWiseEst(SelectedEstProduct));
    props.EstHandleCancel();
    dispatch(ChangeOverAllDiscSales(0));
    dispatch(ChangeOverAllDiscEstimate(0));
  };

  return (
    <DefaultModal
      open={EstModalOpen}
      title="Produt Wise Estimate"
      width={500}
      handleCancel={props.EstHandleCancel}
      footer={false}
      children={
        <div style={{ overflow: 'scroll' }}>
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-evenly',
            }}
          >
            <div className="Re-Print-table">
              <Tables
                columns={columns}
                data={tableDataTakeAway}
                dataSource={tableDataTakeAway}
              />
            </div>
            <div
              style={{
                display: 'flex',
                flexDirection: 'row-reverse',
                width: '100px',
              }}
            >
              <Buttons
                buttonText="OK"
                color="901D77"
                icon={<ArrowRightOutlined />}
                handleSubmit={() => {
                  HandleSelectedEst();
                }}
              />
            </div>
          </div>
        </div>
      }
    />
  );
};

export default BSEstimateModal;