import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Table, Input, Select, Button } from 'antd';
import { PlusOutlined, DeleteOutlined, SaveOutlined, PrinterOutlined } from '@ant-design/icons';
import { Tables } from '../../../../Components/Tables/Table.jsx';
import { useDispatch } from 'react-redux';
import { postProductData, getDirectSaleProducts, getAllProductShortCodes, deleteProductData, getDirectSaleSearchedProduct } from '../../../../Features/ProductPage/ProductPage.js';
import { getSession, printDiv } from '../../../../Services/Others.js';
import { Messages } from '../../../../Components/Notifications/Messages.jsx';
import { FaStarOfLife } from "react-icons/fa6";
import { IoMdRefresh } from "react-icons/io";
import StickerPrintModel from '../../../Product/StickerPrintModal.jsx';
import { getPageStyle, style } from '../../../Product/Printstyles.js';
import { getBarcodeSessionsIDs, getBarcodeTemplate } from '../../../../Features/Barcode/Barcode.js';
import { generateBarcode, generateQRCode, generateQRCodeCopy } from '../../../../Services/utils.js';
import StickerPrintTemplates from '../../../Product/StickerTemplates.jsx';
import useBarcodeGenerator from './useBarcodeQRGenerator.js';

const DirectSale = ({ UomData = [], TaxData = [], ProductTypeData = [], ProdCatData = [], ProdSubCatData = [], SupplierData = [], activeTab = null }) => {

    const formRef = useRef();
    const tableRef = useRef();
    const searchInputRef = useRef();
    const dispatch = useDispatch();
    const [messageType, setMessageType] = useState(null);
    const [messageData, setMessageData] = useState(null);
    const [currentPage, setCurrentPage] = useState(1);

    const CompId = getSession('CompId');
    const BranchId = getSession('BranchId');
    const AppId = getSession('AppId');
    const UserId = getSession('UserId');

    const [dataSource, setDataSource] = useState([]);
    const [editingKey, setEditingKey] = useState(null);

    const [copies, setCopies] = useState(null);
    const [dropdownValue, setDropdownValue] = useState(null);
    const [multiProduct, setMultiProduct] = useState(false);
    const [printReady, setPrintReady] = useState(false);
    const [printProductName, setPrintProductName] = useState(false);
    const [productShortCodes, setAllProductShortCodes] = useState([]);
    const [searchText, setSearchText] = useState('');
    console.log(searchText, "searchText")
    const [stickerPrintModalOpen, setStickerPrintModalOpen] = useState(false);
    const [barcodeTemplateDetails, setBarcodeTemplateDetails] = useState([]);
    const [filteredProducts, setFilteredProducts] = useState([]);
    const [labelPrintData, setLabelPrintData] = useState(null);
    const [prodId, setProdId] = useState(null);
    const [nickName, setNickName] = useState(null);
    const [crossData, setCrossData] = useState(null);
    const [triggerState, setTriggerState] = useState(1);
    const [templateOptions, setTemplateOptions] = useState({
        mrp: false,
        barcode: false,
        color: false,
        eDate: false,
        mDate: false,
        sellingPrice: false,
        productName: false,
        value: '',
        secondValue: '',
        qrcode: false,
        codeType: '',
    });

    console.log((searchText != null && searchText != ''), "filteredProducts")

    const { qrBase64, barcodeBase64 } = useBarcodeGenerator(prodId);

    const handleAdd = () => {
        setDataSource([{
            key: dataSource.length + 1,
            productName: '',
            shortCode: '',
            sellingPrice: '',
            uom: null,
            tax: null,
            prodId: null,
            size: null,
            uomName: null,
            activeStatus: 'A'
        }, ...dataSource]);
    };

    const handleDelete = async (record) => {
        if (record?.prodId) {
            if (searchText != null && searchText !== '') {
                setSearchText('')
                setCurrentPage(1);
                if (searchInputRef.current) {
                    searchInputRef.current.value = '';
                }
            }
            const deleteData = {
                ProdId: record.prodId,
                ActiveStatus: record.activeStatus === 'A' ? 'D' : 'A',
                UpdatedBy: UserId,
            };
            const response = await dispatch(deleteProductData(deleteData))?.unwrap();
            if (response?.data?.statusCode === 1) {
                setMessageData(record.activeStatus === 'A' ? 'Product De-Activated Successfully' : 'Product Activated Successfully');
                setMessageType('success');
                await fetchDirectSaleProducts();
            } else {
                setMessageData(response?.data?.response || 'Failed to update status');
                setMessageType('error');
            }
            return;
        } else {
            // const { key } = record;
            // setDataSource(dataSource.filter(item => item.key !== key));
            setMessageData('Atleast one empty row should be in table.');
            setMessageType('warning');
        }

    };

    const handleChange = useCallback((key, field, value) => {
        if (searchText) {
            setFilteredProducts(prev =>
                prev.map(item =>
                    item.key === key ? { ...item, [field]: value } : item
                )
            );
        } else {
            setDataSource(prev =>
                prev.map(item =>
                    item.key === key ? { ...item, [field]: value } : item
                )
            );
        }
    }, [searchText]);

    const handleSave = async (record) => {

        if (!record.productName || !record.sellingPrice || !record.uom || !record.tax || !record?.shortCode) {
            setMessageData('Please fill all the required fields!');
            setMessageType('warning');
            return;
        }

        const exists = isShortCodeDuplicate(record?.shortCode, record?.prodId);

        if (exists) {
            setMessageData('Short code already exists for another product');
            setMessageType('error');
            return;
        }

        const postData = {
            ProdName: record.productName,
            Size: '1',
            UOM: record.uom,
            MRP: record.sellingPrice,
            SellPrice: record.sellingPrice,
            TaxId: record.tax,
            CompId: CompId,
            BranchId: BranchId,
            AppId: AppId,
            ProdType: ProductTypeData?.find(item => item.ConfigName === 'Product')?.ConfigId,
            ProdCat: ProdCatData?.find(item => item.ConfigName === 'General')?.ConfigId,
            ProdSubCat: ProdSubCatData?.find(item => item.ConfigName === 'General')?.ConfigId,
            QtyBasedPrice: 'N',
            ProdQtywisePriceDetails: [],
            StockAvailable: 'N',
            TokenAvailable: 'N',
            InwardDate: new Date().toJSON(),
            SuppId: SupplierData?.find(item => item.SuppName?.toLowerCase() === 'self')?.SuppId,
            AutoGenerateQr: 'N',
            QRCode: null,
            CreatedBy: UserId,
            ProdLogo: '',
            Cess: 0,
            ProdShortCode: record?.shortCode
        };

        try {
            if (record?.prodId) {
                console.log('Updating Product')
            } else {
                const response = await dispatch(postProductData(postData)).unwrap();
                if (response?.data?.statusCode === 1) {
                    const prodId = response?.data?.ProductDetails?.[0]?.ProdId;
                    const size = response?.data?.ProductDetails?.[0]?.Size;
                    const uomName = response?.data?.ProductDetails?.[0]?.UomName;
                    const totalProducts = response?.data?.ProductDetails?.[0]?.TotalCount;
                    setSearchText(currentSearchText => {
                        if (currentSearchText != null && currentSearchText !== '') {
                            setCurrentPage(1);
                            setTriggerState(prev => prev + 1);
                            if (searchInputRef.current) {
                                searchInputRef.current.value = '';
                            }
                            return '';
                        } else {
                            setDataSource(prev => prev.map(item =>
                                item.key === record.key ? { ...item, prodId, size, uomName, totalProducts } : { ...item, totalProducts }
                            ));
                        }
                        return currentSearchText;
                    });
                    setMessageData('Product saved successfully!');
                    setMessageType('success');
                    return;
                }
            }

        } catch (error) {
            console.error('Error saving product:', error);
        }
    };

    const handlePrint = async (record) => {
        const exists = isShortCodeDuplicate(record?.shortCode, record?.prodId);
        if (exists) {
            setMessageData('Short code already exists for another product. Cannot print.');
            setMessageType('error');
            return;
        }
        setStickerPrintModalOpen(true);
        setLabelPrintData({ ...record, MRP: record?.sellingPrice || 0, SellPrice: record?.sellingPrice || 0 });
        setProdId(record?.shortCode + '' + record?.sellingPrice)
    }

    const columns = useMemo(() => [
        {
            title: 'SL.No',
            width: 50,
            align: 'center',
            render: (_, __, index) => (currentPage - 1) * 10 + index + 1
        },
        {
            title: () => <div style={{ textWrap: 'nowrap', display: "flex", gap: "4px  " }}>Product Name
                <span>
                    <FaStarOfLife size={10} color='red' className='requiredIcons' />
                </span>
            </div>,
            dataIndex: 'productName',
            width: 150,
            render: (text, record) => (
                record.prodId && editingKey !== record.key ?
                    <div>{text}</div> :
                    <Input
                        value={text}
                        onChange={(e) => handleChange(record.key, 'productName', e.target.value)}
                        placeholder="Enter product name"
                    />
            )
        },
        {
            title: () => <div style={{ textWrap: 'nowrap', display: "flex", gap: "4px  " }}>Short Code
                <span>
                    <FaStarOfLife size={10} color='red' className='requiredIcons' />
                </span>
            </div>,
            dataIndex: 'shortCode',
            width: 100,
            render: (text, record) => (
                record.prodId && editingKey !== record.key ?
                    <div>{text}</div> :
                    <Input
                        value={text}
                        onInput={(e) => {
                            const originalValue = e.target.value;
                            const hasNonAlpha = /[^a-zA-Z]/.test(originalValue);
                            if (hasNonAlpha) {
                                setMessageData('Enter Alphabet Characters only');
                                setMessageType('warning');
                            }
                        }}
                        onChange={(e) => {
                            const value = e.target.value.replace(/[^a-zA-Z]/g, '').toUpperCase();
                            const exists = isShortCodeDuplicate(value, record?.prodId);
                            if (exists && value) {
                                setMessageData('Short code already exists for another product');
                                setMessageType('error');
                            }
                            handleChange(record.key, 'shortCode', value);
                        }}
                        placeholder="Short Code"
                    />
            )
        },
        {
            title: () => <div style={{ textWrap: 'nowrap', display: "flex", gap: "4px  " }}>Selling Price
                <span>
                    <FaStarOfLife size={10} color='red' className='requiredIcons' />
                </span>
            </div>,
            dataIndex: 'sellingPrice',
            width: 120,
            render: (text, record) => (
                record.prodId && editingKey !== record.key ?
                    <div>{text}</div> :
                    <Input
                        value={text}
                        onChange={(e) => {
                            const value = e.target.value.replace(/[^0-9.]/g, '');
                            const parts = value.split('.');
                            const formatted = parts.length > 2 ? `${parts[0]}.${parts.slice(1).join('')}` : value;
                            handleChange(record.key, 'sellingPrice', formatted);
                        }}
                        placeholder="0.00"
                    />
            )
        },
        {
            title: () => <div style={{ textWrap: 'nowrap', display: "flex", gap: "4px  " }}>UOM
                <span>
                    <FaStarOfLife size={10} color='red' className='requiredIcons' />
                </span>
            </div>,
            dataIndex: 'uom',
            width: 60,
            render: (text, record) => (
                record.prodId && editingKey !== record.key ?
                    <div>{UomData?.find(item => item.ConfigId === text)?.ConfigName || '-'}</div> :
                    <Select
                        disabled={record?.prodId}
                        className='uom-select'
                        value={text}
                        onChange={(value) => handleChange(record.key, 'uom', value)}
                        placeholder="UOM"
                        style={{ width: '100%' }}
                        options={UomData?.map(item => ({
                            value: item.ConfigId,
                            label: item.ConfigName
                        }))}
                    />
            )
        },
        {
            title: () => <div style={{ textWrap: 'nowrap', display: "flex", gap: "4px  " }}>Tax
                <span>
                    <FaStarOfLife size={10} color='red' className='requiredIcons' />
                </span>
            </div>,
            dataIndex: 'tax',
            width: 70,
            render: (text, record) => {
                if (record.prodId && editingKey !== record.key) {
                    const tax = TaxData?.find(item => item.TaxId === text);
                    return <div>{tax ? tax?.TaxIdName + ' - ' + `${tax?.TaxPercentage}%` : '-'}</div>;
                }

                return (
                    <Select
                        className='tax-select'
                        value={text}
                        disabled={record?.prodId}
                        onChange={(value) => handleChange(record.key, 'tax', value)}
                        placeholder="Tax"
                        style={{ width: '100%' }}
                        options={TaxData?.map(item => ({
                            value: item.TaxId,
                            label: `${item.TaxIdName} - ${item.TaxPercentage}%`
                        }))}
                    />
                );
            }
        },
        {
            title: 'Save / Print',
            width: 90,
            align: 'center',
            render: (_, record) => {
                const existingProduct = record?.prodId;

                return (
                    <div className='directsaleBTN' style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
                        {!existingProduct && <Button
                            icon={<SaveOutlined />}
                            size="small"
                            disabled={existingProduct}
                            className='save-btn'
                            onClick={() => handleSave(record)}
                        >
                            Save
                            {/* {!existingProduct ? 'Save' : 'Update'} */}
                        </Button>}
                        {existingProduct && <Button
                            icon={<PrinterOutlined />}
                            size="small"
                            disabled={!existingProduct}
                            onClick={() => handlePrint(record)}
                        >
                            Print
                        </Button>}
                    </div>
                );
            }
        },
        {
            title: 'Action',
            width: 60,
            align: "center",
            render: (_, record) => {
                if (record?.activeStatus === 'A') {
                    return <DeleteOutlined
                        onClick={() => handleDelete(record)}
                        style={{ color: 'red', cursor: 'pointer', fontSize: '18px' }}
                    />
                } else {
                    return <IoMdRefresh
                        style={{ color: 'blue', cursor: 'pointer', fontSize: '18px' }}
                        onClick={() => handleDelete(record)}
                    />
                }

            }
        }
    ], [
        searchText,
        editingKey,
        productShortCodes,
        UomData,
        TaxData
    ]);

    useEffect(() => {
        if (activeTab === 'directSale' && AppId && CompId && BranchId) {
            fetchDirectSaleProducts();
            fetchAllProductShortCodes();
        }
    }, [activeTab, AppId, BranchId, CompId, currentPage, triggerState]);

    useEffect(() => {
        if (dataSource.every(row => row.prodId)) {
            handleAdd();
        }
    }, [dataSource]);

    useEffect(() => {
        const timer = setTimeout(() => {
            if (searchText) {
                fetchSearchedProducts();
            } else {
                setFilteredProducts([{
                    key: 1,
                    productName: '',
                    shortCode: '',
                    sellingPrice: '',
                    uom: null,
                    tax: null,
                    prodId: null,
                    size: null,
                    uomName: null,
                    activeStatus: 'A'
                }]);
            }
        }, 500);

        return () => clearTimeout(timer);
    }, [searchText, AppId, BranchId, CompId]);

    useEffect(() => {
        const handleClickOutside = (event) => {
            if (tableRef.current && !tableRef.current.contains(event.target) && !event.target.closest('.ant-select-dropdown')) {
                setEditingKey(null);
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);

    useEffect(() => {
        if (activeTab === 'directSale' && AppId && CompId && BranchId && stickerPrintModalOpen) {
            getBarcodeSessionData();
            fetchBarcodeTemplateDetails();
        }
    }, [activeTab, AppId, BranchId, CompId, stickerPrintModalOpen]);

    const fetchSearchedProducts = async () => {
        try {
            const data = {
                AppId: AppId,
                CompId: CompId,
                BranchId: BranchId,
                prodName: searchText
            }
            const response = await dispatch(getDirectSaleSearchedProduct(data))?.unwrap();
            if (response?.data?.data?.length > 0 && response?.data?.statusCode === 1) {
                const products = response?.data?.data?.map((item, index) => ({
                    key: index + 1,
                    productName: item.ProdName,
                    shortCode: item.ProdShortCode,
                    sellingPrice: item.SellPrice,
                    uom: item.UOM,
                    tax: item.TaxId,
                    prodId: item.ProdId,
                    activeStatus: item?.ActiveStatus,
                    size: item.Size || 1,
                    uomName: item.UomName || 'PCS',
                    totalProducts: item?.TotalCount
                }))
                setFilteredProducts([{
                    key: products.length + 1,
                    productName: '',
                    shortCode: '',
                    sellingPrice: '',
                    uom: null,
                    tax: null,
                    prodId: null,
                    size: null,
                    uomName: null,
                    activeStatus: 'A'
                }, ...products]);
            } else {
                setFilteredProducts([{
                    key: 1,
                    productName: '',
                    shortCode: '',
                    sellingPrice: '',
                    uom: null,
                    tax: null,
                    prodId: null,
                    size: null,
                    uomName: null,
                    activeStatus: 'A'
                }]);
            }
        } catch (error) {
            console.error(error?.message)
        }

    }

    const isShortCodeDuplicate = useCallback((code, prodId) => {
        return productShortCodes.some(
            item =>
                item.ProdShortCode.toUpperCase() === code.toUpperCase() &&
                item.ProdId !== prodId
        );
    }, [productShortCodes]);

    const fetchBarcodeTemplateDetails = async () => {
        const response = await dispatch(
            getBarcodeTemplate({ compId: CompId, appId: AppId, branchId: BranchId })
        ).unwrap();
        if (response?.data?.statusCode === 1 && response?.data?.data?.length > 0) {
            const { TemplateDetails } = response?.data?.data?.[0];
            setBarcodeTemplateDetails(TemplateDetails);
        } else {
            setBarcodeTemplateDetails([]);
        }
    };

    const getBarcodeSessionData = async () => {
        try {
            let response = await dispatch(getBarcodeSessionsIDs()).unwrap();
            if (response?.data?.statusCode === 1 && response?.data?.data?.length > 0) {
                setCrossData(
                    response?.data?.data?.filter(
                        (item) => !item.ConfigName?.includes('100X13 (55MM Printable Gold)')
                    ) || []
                );
            } else {
                setCrossData([]);
            }
        } catch (error) {
            console.error('Error fetching barcode session data:', error);
        }
    };

    const fetchDirectSaleProducts = async () => {
        try {
            const data = {
                AppId: AppId,
                CompId: CompId,
                BranchId: BranchId,
                page: currentPage
            }

            const response = await dispatch(getDirectSaleProducts(data))?.unwrap();
            if (response?.data?.statusCode === 1 && response?.data?.data?.length > 0) {
                const products = response?.data?.data?.map((item, index) => ({
                    key: index + 1,
                    productName: item.ProdName,
                    shortCode: item.ProdShortCode,
                    sellingPrice: item.SellPrice,
                    uom: item.UOM,
                    tax: item.TaxId,
                    prodId: item.ProdId,
                    activeStatus: item?.ActiveStatus,
                    size: item.Size || 1,
                    uomName: item.UomName || 'PCS',
                    totalProducts: item?.TotalCount
                }));
                setDataSource([{
                    key: products.length + 1,
                    productName: '',
                    shortCode: '',
                    sellingPrice: '',
                    uom: null,
                    tax: null,
                    prodId: null,
                    size: null,
                    uomName: null,
                    activeStatus: 'A'
                }, ...products]);
            } else {
                setDataSource([])
            }

        } catch (error) {
            console.error('Error fetching direct sale products:', error);
        }
    }

    const fetchAllProductShortCodes = async () => {
        try {
            const data = {
                AppId: AppId,
                CompId: CompId,
                BranchId: BranchId,
            }

            const response = await dispatch(getAllProductShortCodes(data))?.unwrap();
            if (response?.data?.statusCode === 1 && response?.data?.data?.length > 0) {
                setAllProductShortCodes(response?.data?.data);
            } else {
                setAllProductShortCodes([]);
            }

            console.log(response);

        } catch (error) {
            console.error('Error fetching product short codes:', error);
        }
    }

    const handlePageChange = (current) => {
        setCurrentPage(current);
    };

    const onFinish = async () => {
        const template = barcodeTemplateDetails?.find(
            (find) => find.SessionName === dropdownValue
        );
        const templateAvailable = template === undefined ? false : true;

        if (templateAvailable) {
            const checkComponent = (name) =>
                template?.OptionDetails?.some((some) => some.OptionName === name);
            const mrp = checkComponent('MRP');
            const barcode = checkComponent('Barcode');
            const color = checkComponent('Color');
            const eDate = checkComponent('E Date');
            const mDate = checkComponent('M Date');
            const sellingPrice = checkComponent('Selling Price');
            const productName = checkComponent('Product Name');
            const qrcode = checkComponent('Qrcode');
            const position = template.Position !== '' ? template.Position : '';
            const positionString =
                template.PositionString !== '' ? template.PositionString : '';

            setTemplateOptions({
                mrp: mrp,
                barcode: barcode,
                color: color,
                eDate: eDate,
                mDate: mDate,
                sellingPrice: sellingPrice,
                productName: productName,
                value: position,
                secondValue: positionString,
                qrcode: qrcode,
                codeType: template?.CodeType,
            });
        }

        setPrintReady(true);

        setTimeout(async () => {
            switch (dropdownValue) {
                case '15X15 6cross': // COMPLETE
                    await printDiv(
                        templateAvailable ? 'label-15X156cross' : 'StickerPrints0',
                        style + getPageStyle(92)
                    );
                    handleModalClose();
                    break;
                case '22X35 3cross': // Need to check
                    await printDiv(
                        templateAvailable ? '22X353cross' : 'StickerPrints1',
                        style + getPageStyle(105)
                    );
                    handleModalClose();
                    break;
                case '25X25 4cross': // COMPLETE
                    await printDiv(
                        templateAvailable ? '25X254cross' : 'StickerPrints2',
                        style + getPageStyle(100)
                    );
                    handleModalClose();
                    break;
                case '25X50 2cross': //Need to check
                    await printDiv(
                        templateAvailable ? '25X502cross' : 'StickerPrints3',
                        style + getPageStyle(100)
                    );
                    handleModalClose();
                    break;
                case '50X30 Single': // COMPLETE
                    await printDiv(
                        templateAvailable ? '50X30Single' : 'StickerPrints4',
                        style
                    );
                    handleModalClose();
                    break;
                case '50X25 Single': // COMPLETE
                    await printDiv(
                        templateAvailable ? '50X25Single' : 'StickerPrints5',
                        style
                    );
                    handleModalClose();
                    break;
                case '100X13 (55MM Printable)': //Need to check
                    await printDiv(
                        templateAvailable ? '100X13(55MMPrintable)' : 'StickerPrints6',
                        style
                    );
                    handleModalClose();
                    break;
                case '100X15 (70MM Printable)': // COMPLETE
                    await printDiv(
                        templateAvailable ? '100X15(70MMPrintable)' : 'StickerPrints7',
                        style
                    );
                    handleModalClose();
                    break;
                case '100X150': // COMPLETE
                    await printDiv(
                        templateAvailable ? '100X150' : 'StickerPrints8',
                        style
                    );
                    handleModalClose();
                    setPrintReady(false);
                    break;
                default:
                    alert('! Select correct cross ');
                    setPrintReady(false);
            }
        }, 100);
    };

    const CoresOnChange = (params) => {
        setDropdownValue(params);
        formRef.current?.setFieldsValue({ Cross: params });
        const template = barcodeTemplateDetails?.find(
            (find) => find.SessionName === params
        );
        const checkComponent = (name) =>
            template?.OptionDetails?.some((some) => some.OptionName === name);
        const productName = checkComponent('Product Name');
        setPrintProductName(productName);
    };

    const CopiesOnChange = (params) => {
        setCopies(params);
        formRef.current?.setFieldsValue({ Copies: params });
    };

    const handleModalClose = () => {
        setCopies(null)
        setDropdownValue('')
        setStickerPrintModalOpen(false);
        setLabelPrintData(null);
        setNickName(null);
        setProdId(null)
        setMultiProduct(false);
        formRef?.current?.resetFields();
        setPrintReady(false);
    };

    const imageTagBarcodeAndQR = useCallback(
        (w = 'auto', fs = '6px', codeData = null) => {
            const currentCode = codeData || prodId;
            return (
                (templateOptions.barcode || templateOptions.qrcode) && (
                    <>
                        <img
                            style={{ width: w }}
                            src={
                                templateOptions.codeType === 'B'
                                    ? !multiProduct
                                        ? barcodeBase64
                                        : generateBarcode(currentCode)
                                    : !multiProduct
                                        ? qrBase64
                                        : generateQRCode(QrandbarcodeDatas, currentCode)
                            }
                            alt="Barcode"
                        />
                        {templateOptions.codeType !== 'B' && (
                            <p style={{ margin: '0', padding: '0', fontSize: fs }}>
                                {currentCode}
                            </p>
                        )}
                    </>
                )
            );
        },
        [templateOptions, multiProduct, barcodeBase64, qrBase64, prodId]
    );

    const onComplete = useCallback(() => {
        setMessageType(null);
        setMessageData(null);
    }, []);

    return (
        <div className='direct-sale-container'>
            <Messages
                messageType={messageType}
                messageData={messageData}
                onComplete={onComplete}
            />
            <div className="bsreprintmodaltable-search">
                <input
                    ref={searchInputRef}
                    type="text"
                    placeholder="Search Product / Short Code..."
                    onChange={(e) => {
                        setSearchText(e.target.value);
                        setCurrentPage(1)
                    }}
                />
            </div>
            <div style={{ marginBottom: '10px', color: '#666', fontSize: '14px', fontStyle: 'italic' }}>
                Note: Click on a row to modify the product details
            </div>
            <div className='DirectSaleTable' ref={tableRef}>
                <Tables
                    rowKey="prodId"
                    data={(searchText != null && searchText != '') ? filteredProducts : dataSource}
                    dataSource={(searchText != null && searchText != '') ? filteredProducts : dataSource}
                    columns={columns}
                    onRow={(record) => ({
                        onClick: () => record.prodId && setEditingKey(record.key)
                    })}
                    ownPagination={true}
                    pagination={{
                        current: currentPage,
                        onChange: handlePageChange,
                        total: (searchText != null && searchText != '') ? filteredProducts?.length : ((dataSource[dataSource.length - 1]?.totalProducts || 0) + 1),
                        pageSize: 11,
                        showSizeChanger: false,
                        hideOnSinglePage: true,
                    }}
                    bordered
                />
            </div>

            {stickerPrintModalOpen && <StickerPrintModel
                open={stickerPrintModalOpen}
                handleCancel={handleModalClose}
                formRef={formRef}
                onFinish={onFinish}
                MultiCode={multiProduct}
                activeTab={null}
                setActiveTab={() => { }}
                selectedRecords={null}
                coresdata={crossData}
                dropdownValue={dropdownValue}
                CoresOnChange={CoresOnChange}
                barcodeTemplateDetails={barcodeTemplateDetails}
                detail={labelPrintData}
                proName={labelPrintData?.productName}
                nickName={nickName}
                ProdId={labelPrintData?.shortCode + '' + labelPrintData?.sellingPrice}
                size={labelPrintData?.size}
                // valueStyleColumn={valueStyleColumn}
                // secondValueStyle={secondValueStyle}
                // valueStyleRow={valueStyleRow}
                CopiesOnChange={CopiesOnChange}
                printProductName={printProductName}
                totalCopies={null}
                setstockWiseQrcode={null}
                setProductWiseQrcode={null}
                setNickName={setNickName}
                templateOptions={templateOptions}
            />}

            {printReady && (
                <StickerPrintTemplates
                    selectedRecords={null}
                    copies={copies}
                    nickName={nickName}
                    proName={labelPrintData?.productName}
                    ProdId={labelPrintData?.shortCode + '' + labelPrintData?.sellingPrice}
                    size={labelPrintData?.size + ' ' + labelPrintData?.uomName}
                    detail={labelPrintData}
                    templateOptions={templateOptions}
                    base64Image={qrBase64}
                    QrandbarcodeDatas={null}
                    MultiCode={multiProduct}
                    generateQRCodeCopy={(code) =>
                        generateQRCodeCopy(null, code)
                    }
                    generateCodeImage={(code, codeType = 'Q') => generateCodeImage(code, codeType, null)}
                    imageTagBarcodeAndQR={imageTagBarcodeAndQR}
                    dropdownValue={dropdownValue}
                    barcodeTemplateDetails={barcodeTemplateDetails}
                />
            )}
        </div>
    );
};

export default DirectSale;