import React, { useCallback, useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { Button, Form, Input, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { Messages } from '../../Components/Notifications/Messages';
import { Tables } from '../../Components/Tables/Table';
import { Search } from '../../Components/Forms/Search';
import {
  changeBreadCrumb,
  getEmpAccess,
} from '../../Features/AppPage/CenterPage.js';
import Buttons from '../../Components/Forms/Buttons';
import { getSession, printDiv, pdfDiv } from '../../Services/Others';
import FormHeader from '../PageComponents/FormHeader.jsx';
import { useAuth } from '../../AuthContext.jsx';
import '../../Styles/OverAllStyle/OverAllStyle.scss';
import { getDeliveryChallan } from '../../Features/DeliveryChallan/DeliveryChallan.js';
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
import { IoEye } from 'react-icons/io5';
import { MdOutlineMail } from 'react-icons/md';
import { FaPrint } from 'react-icons/fa';
import DeliveryPrint from './DeliveryPrint.jsx';
import { DCPrintStyleFunction } from './DCPrintStyleFunction.js';

import { Emailsend } from '../../Features//PurchaseOrder/PurchaseOrder.js';
import { getPrintSelectionComponentData } from '../../Features/ThemeChange/ThemeChange.js';

const subDirectory = import.meta.env.ENV_BASE_URL;
const items = [
  {
    name: 'Home',
    link: `${subDirectory}app-page/home`,
  },

  {
    name: 'Delivery Challan / list',
    link: `${subDirectory}setting/delivery-challan`,
  },
];

const DeliveryChallanList = () => {
  const [form] = Form.useForm();
  const location = useLocation();
  const { SadminuserAccess } = useAuth();
  let SAAccessCommonMaster = SadminuserAccess?.find(
    (e) => e?.MenuName === 'Delivery Challan'
  );
  console.log(SadminuserAccess, 'SadminuserAccess', SAAccessCommonMaster);

  const [page, setpage] = useState(1);
  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const AppId = getSession('AppId');
  const UserId = getSession('UserId');
  const UserType = getSession('UserType');

  const navigateTo = useNavigate();
  const dispatch = useDispatch();
  const [DCPrintTemplateStyle, setDCPrintTemplateStyle] = useState(null);
    const [DCPrintTemplateDtl, setDCPrintTemplateDtl] = useState(null);
  const [tabledata, setTabledata] = useState();
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [filteredInfo, setFilteredInfo] = useState({});
  const [searchedText, setSearchedText] = useState('');
  const [sortedInfo, setSortedInfo] = useState({});
  const [empData, setEmpData] = useState();
  const [addnewAccess, setaddnewAccess] = useState(true);
  const [ProductShow, setProductShow] = useState(false);
  const [ProductDetails, setProductDetails] = useState();
  const [PrintingData, setPrintingData] = useState([]);

  const [iSEmail, setiSEmail] = useState(false);
  const [enteredEmail, setEnteredEmail] = useState('');
  const [pendingOrderDetails, setPendingOrderDetails] = useState(null);
  const [pendingRecord, setPendingRecord] = useState(null);
  console.log(ProductDetails, 'ProductDetails');
  const PurchaseOrderStyle = `<style>
    @media print {
      @page {
        size: A4;
        margin: 0;
      }
      
      .Quo-Print-Body {
        width: 195mm;
        margin: 0 auto;
        // padding: 10mm;
      }
    }
    
    .Quo-Print-Body {
      margin: 0;
      padding: 10px;
      background: white;
    }
  
    .Quo-Print-Content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height:100%
      max-width: 200mm;
      margin: 0 auto;
      border: 1px solid rgb(170, 164, 164);
      padding: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      gap:0.5rem;
    
    }
    .Quo-print-Logo{
      width: 50px ;
      height: 50px;
      margin:5px 0 0 5;
     }
    .Quo-Print-ComCus{
    display:flex;
    flex-direction:column;
      height:18vh;
      justify-content:space-between;
    }
    .Quo-Print-Tabsum{
      display:flex;
      flex-direction:column;
      justify-content:space-between; 
      gap:1rem;
      height:60vh;
    }
    .Quo-Print-Header{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    
    }

    .Quo-Print-Company{
      display:flex;
      flex-direction:column;
      padding:10px;
      gap:0.1rem;
    }
    .Quo-Print-Cname{
        font-size:25px;
    }
    .Quo-Print-address{
      font-size:22px;
      display:flex;
      flex-wrap:wrap;
    }
    .Quo-Print-Qno{
      display:flex;
      flex-direction:column;
      padding:10px;
      gap:0.1rem;
    }
    .Quo-Print-Customer{
      display:flex;
      flex-direction:Column;
      padding-left:10px;
      gap:0.1rem;
          width: 100%;
    }
    .Horizondal-line{
      border-bottom: 0.5px solid rgb(170, 164, 164);
    }
    .Quo-Print-Table{
      display:flex;
    }    .Quo-Print-ProTable {
      width: 100%;
      border-collapse: collapse;
      margin-top: 15px;
    }
    
    .Quo-Print-DataRow {
    //   line-height: 2.5rem;
      border-bottom: 1px solid #eee;
    }
    
    .Quo-Print-tableheader {
      background-color: #f8f9fa;
      border-top: 1px solid rgb(170, 164, 164);
      border-bottom: 1px solid rgb(170, 164, 164);
      line-height: 3rem;
    }
    
    .Quo-Print-TableData {
      text-align: right;
      padding: 8px;
      font-size: 20px;
    }
    
    .Quo-Print-TableDataSno {
      text-align: center;
      padding: 8px;
      font-size: 20px;
      width: 60px;
    }

    .Quo-Print-TableDataName {
      text-align: left;
      padding: 8px;
      font-size: 20px;
    }
    
    .Quo-Print-headingData {
      text-align: center;
      padding: 8px;
      font-size: 20px;
      font-weight: bold;
    }
    .Quo-Print-TableDataAmt{
      text-align:right;
      padding-right:5px;
      font-size:20px;
    }
    .Quo-Print-Summary{
      display:flex;
      flex-direction:row;
      justify-content: flex-end;
      
    }
    .Quo-Print-SummTableData{
      text-align:right;
      padding:1px;
      font-size:20px;
      
    }
    .Quo-Print-Total{
      display:flex;
      justify-content:flex-end;
      border:0.5px solid black;
      width:300px;
      margin-right: 10px;
      font-size:20px;
    }
   
 
    }

</style>`;
  const handelAddButton = () => {
    navigateTo(`${subDirectory}setting/delivery-challan`);
  };

  const handleChange = (pagination, filters, sorter) => {
    setFilteredInfo(filters);
    setSortedInfo(sorter);
  };

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

  async function fetchData() {
    if (location?.state?.Notiffy) {
      setMessageType(location?.state?.Notiffy.messageType);
      setMessageData(location?.state?.Notiffy.messageData);
    }
  }
  useEffect(() => {
    fetchData();
    TableData();
    dispatch(changeBreadCrumb({ items: items }));
    getPrintData()
    // if (UserType === "Employee") {
    //   fetchApi()
    // }
  }, []);

  useEffect(() => {
    if (UserType === 'Employee') {
      fetchApi();
    }
  }, [UserType]);

  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 fetchApi = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      EmpId: UserId,
    };
    let response = await dispatch(getEmpAccess(data)).unwrap();
    let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter(
      (item) => item.ConfigName === 'Delivery Challan'
    );
    setEmpData(datas?.[0]);
  };

  const TableData = async () => {
    let response = await dispatch(
      getDeliveryChallan({ CompId: CompId, BranchId: BranchId, AppId: AppId })
    ).unwrap();
    if (response?.data?.statusCode == 1) {
      setTabledata(response?.data?.data);
    }
  };
 const getPrintData = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
    };
    let response = await dispatch(getPrintSelectionComponentData(data)).unwrap();
    if(response?.data?.statusCode === 1) {
      let DCPrintTemplate =
                response?.data?.data?.[0]?.ComponentDetails?.find(
                  (item) => item.SetasDefault == 'Y' && item.PrintTypeName === 'Delivery Chalan'
                );
      console.log(DCPrintTemplate,response?.data?.data?.[0]?.ComponentDetails?.find(
                  (item) => item.SetasDefault == 'Y' && item.PrintTypeName === 'Delivery Chalan'
                ), 'DCPrintTemplate');
               setDCPrintTemplateStyle(DCPrintTemplate?.StyleName);
               setDCPrintTemplateDtl(DCPrintTemplate);
    }

 
  };
  const actionsFormatter = async (row, rowIndex) => {
    if (row.ActiveStatus !== 'D') {
      navigateTo(
        `${subDirectory}setting/dinein-master/edit`,
        { state: { editstate: row } },
        { key: rowIndex }
      );
    }
  };

  const onSearch = (value) => {
    setSearchedText(value);
  };

  const onSearchChange = (e) => {
    setSearchedText(e?.target?.value);
  };



  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);
  const handlePrint = (OrderDetails, record) => {
    const orderData = {
      OrderId: record?.PurOrderId,
      PurOrderDate: record?.PurOrderDate,
      SupplierName: record?.SuppName,
      SuppMobile: record?.SuppMobile,
      SuppGSTIN: record?.SuppGSTIN,
      Remarks: record?.Remarks,
      DCNo: record?.DCNo,
      DCDate: record?.DCDate,
      CustMobile: record?.CustMobile,
      CustName: record?.CustName,
      TransporterName: record?.TransporterName,
      ModeOfTransport: record?.ModeOfTransport,
      TransporterId: record?.TransporterId,
      ProductDetails: record?.ProductDetails || [],
      TotalAmount: record?.TotalAmount,
    };
    setPrintingData([orderData]);
    print()
  };
  const print=async()=>{
    const DCstyle = await DCPrintStyleFunction(
             DCPrintTemplateStyle == undefined ? 'Style 13' : DCPrintTemplateStyle);
           const stylesMap = {
             'Style 1': 'DCPrintStyle1',
             'Style 2': 'DCPrintStyle2',
             'Style 3': 'DCPrintStyle3',
             'Style 4': 'DCPrintStyle4',
             'Style 5': 'DCPrintStyle5',
             'Style 6': 'DCPrintStyle6',
             'Style 7': 'DCPrintStyle7',
             'Style 8': 'DCPrintStyle8',
             'Style 9': 'DCPrintStyle9',
             'Style 10': 'DCPrintStyle10',
             'Style 11': 'DCPrintStyle11',
             'Style 12': 'DCPrintStyle12',
             'Style 13': 'DC-Default-Print',
             A4: 'DCPrintStyleA4',
             A5: 'DCPrintStyleA5',
             A4Standard: 'DCPrintStyleA4Standard',
           };
       
           const selectedStyle =
             stylesMap[
             DCPrintTemplateStyle == undefined ? 'Style 13' : DCPrintTemplateStyle
             ]; 
             console.log(selectedStyle,DCstyle, 'selectedStyle');
        setTimeout(() => {
    
          printDiv(`${selectedStyle}`, DCstyle);
        }, 100);
  }
  const handleEmailClick = async (ProductDetails, record) => {
    // alert("This feature is not available yet. Please contact support for assistance.");
    const orderData = {
      0: { ...record },
      customerName: record?.CustName || '',
      CustName: record?.CustName || '',
      customerAddress: record?.AddressDetails || '',
      Address1: record?.AddressDetails || '',
      customerMobile: record?.CustMobile || '',
      MobileNo: record?.CustMobile || '',
      CustMail: record?.CustEmail,
    };

    // setPrintData(record);

    if (orderData?.CustMail) {
      setTimeout(async () => {
        try {
          const blob = await pdfDiv('Pur-Order-Print', PurchaseOrderStyle);
          console.log(blob, 'blobblob');

          const payload = {
            fileBlob: blob,
            toEmail: orderData?.CustMail,
            type: 'PurchaseOrder',
            messageTemplatesList: [],
          };

          const res = await dispatch(Emailsend(payload))?.unwrap();

          console.log('✅ API Response:', res?.data || res);

          setMessageData('Email sent successfully');
          setMessageType('success');
        } catch (error) {
          console.error('❌ Email send failed:', error);
          setMessageData('Email failed to send');
          setMessageType('error');
        }
      }, 300);
    } else {
      setPendingOrderDetails(ProductDetails);
      setPendingRecord(record);
      setiSEmail(true);
    }
  };


  const handleSendEmailWithEnteredEmail = async (values) => {
    const record = { ...pendingRecord, CustEmail: values.email };
    await handleEmailClick(pendingOrderDetails, record);
    setiSEmail(false);
    setPendingOrderDetails(null);
    setPendingRecord(null);
    form.resetFields();

  };
  const columns = [
    {
      title: 'Sl.No',
      key: 'sno',
      align: 'center',
      //   width: '100px',
      render: (text, object, index) => (
        <a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
      ),
    },
    {
      title: 'Customer Name',
      dataIndex: 'CustName',
      key: 'CustName',
      //   width: '150px',
      render: (text, object, index) => (
        <a style={{ color: 'black' }}>
          {object?.CustName || object?.CustMobile}
        </a>
      ),
      filteredValue: [searchedText],
      onFilter: (value, record) => {
        return (
          String(record.CustShortName)
            .toLowerCase()
            .includes(value.toLowerCase()) ||
          String(record.CustName).toLowerCase().includes(value.toLowerCase()) ||
          String(record.CustMobile).toLowerCase().includes(value.toLowerCase())
        );
      },
    },
    {
      title: 'Mode Of Transport',
      dataIndex: 'ModeOfTransport',
      key: 'ModeOfTransport',
      //   width: '150px',
      //
    },
    // {
    //   title: 'Transporter Name',
    //   dataIndex: 'TransporterName',
    //   key: 'TransporterName',
    //   width: '150px',
    //   //
    // },

    {
      title: 'Products',
      dataIndex: 'TransporterName',
      key: 'TransporterName',
      width: '150px',
      render: (_, record) => (
        <a>
          <IoEye
            style={{ fontSize: '25px' }}
            onClick={() => {
              setProductShow(true);
              setProductDetails(record?.ProductDetails);
            }}
          />
        </a>
      ),
      //
    },
    {
      title: 'Shared Product Details',
      key: 'Order Details',
      dataIndex: 'OrderDetails',
      align: 'center',
      render: (OrderDetails, record) => (
        <div style={{ display: 'flex', justifyContent: 'center', gap: '1px' }}>
          <MdOutlineMail
            size={30}
            color="#25D366"
            style={{ cursor: 'pointer' }}
            title="Share by Email"
            onClick={() => handleEmailClick(OrderDetails, record)}
          />
          <FaPrint
            size={25}
            color="#1292EE"
            style={{ cursor: 'pointer' }}
            title="Print"
            onClick={() => handlePrint(OrderDetails, record)}
          />
        </div>
      ),
    },

    // {
    //   title: 'Chair Count',
    //   dataIndex: 'ChairCount',
    //   key: 'ChairCount',
    //   width: '100px',
    //   align: 'right',
    //   render: (text) => <a style={{ color: 'black' }}>{text}</a>,
    //   filteredValue: filteredInfo.ChairCount || null,
    //   onFilter: (value, record) => record.ChairCount.includes(value),
    //   sorter: (a, b) => a?.ChairCount?.length - b?.ChairCount?.length,
    //   sortOrder:
    //     sortedInfo.columnKey === 'ChairCount' ? sortedInfo.order : null,
    //   ellipsis: true,
    // },
    // {
    //   title: 'DineIn Type',
    //   dataIndex: 'DineInTypeName',
    //   key: 'DineInTypeName',
    //   render: (text) => <a style={{ color: 'black' }}>{text}</a>,
    //   filteredValue: filteredInfo.CompName || null,
    //   onFilter: (value, record) => record.DineInTypeName.includes(value),
    //   sorter: (a, b) => a?.DineInTypeName?.length - b?.DineInTypeName?.length,
    //   sortOrder:
    //     sortedInfo.columnKey === 'DineInTypeName' ? sortedInfo.order : null,
    //   ellipsis: true,
    // },
    // {
    //   title: 'Chair Level Serve',
    //   dataIndex: 'ChairLevelSer',
    //   key: 'ChairLevelSer',
    //   render: (text) => <a style={{ color: 'black' }}>{text}</a>,
    //   filteredValue: filteredInfo.ChairLevelSer || null,
    //   onFilter: (value, record) => record.ChairLevelSer.includes(value),
    //   sorter: (a, b) => a?.ChairLevelSer?.length - b?.ChairLevelSer?.length,
    //   sortOrder:
    //     sortedInfo.columnKey === 'ChairLevelSer' ? sortedInfo.order : null,
    //   ellipsis: true,
    // },
    // {
    //   title: 'Chair Name',
    //   dataIndex: 'ChairLevelSerDetails',
    //   key: 'ChairLevelSerDetails',
    //   width: '150px',
    //   render: (ChairLevelSerDetails) => (
    //     <a style={{ color: 'black' }}>
    //       {ChairLevelSerDetails?.length > 0
    //         ? ChairLevelSerDetails?.map((item) => item.ChairName).join(',')
    //         : ' - '}
    //     </a>
    //   ),
    // },
    // {
    //   title: 'Action',
    //   key: 'Action',
    //   dataIndex: 'Action',
    //   render: (_, record, index) =>
    //     tabledata.length >= 1 ? (
    //       <Space size="middle">
    //         {record.ActiveStatus === 'A' ? (
    //           <a>
    //             <EditFilled
    //               style={{ color: '#1292EE' }}
    //               onClick={() =>
    //                 UserType === 'Super Admin' ||
    //                 (UserType === 'Super Admin User' &&
    //                   SAAccessCommonMaster?.UpdateAccess === 'Y') ||
    //                 (UserType === 'Employee' &&
    //                   empData?.UpdateAccess === 'Y') ||
    //                 UserType === 'Admin'
    //                   ? actionsFormatter(record, index)
    //                   : null
    //               }
    //             />
    //           </a>
    //         ) : (
    //           ''
    //         )}
    //         <a>
    //           {record.ActiveStatus === 'A' ? (
    //             <DeleteFilled
    //               style={{
    //                 color: '#FF4D4F',
    //               }}
    //               onClick={() =>
    //                 UserType === 'Super Admin' ||
    //                 (UserType === 'Super Admin User' &&
    //                   SAAccessCommonMaster?.DeleteAccess === 'Y') ||
    //                 (UserType === 'Employee' &&
    //                   empData?.DeleteAccess === 'Y') ||
    //                 UserType === 'Admin'
    //                   ? statusFormatter(record)
    //                   : null
    //               }
    //             />
    //           ) : (
    //             <ReloadOutlined
    //               style={{
    //                 color: '#52C41A',
    //               }}
    //               onClick={() =>
    //                 UserType === 'Super Admin' ||
    //                 (UserType === 'Super Admin User' &&
    //                   SAAccessCommonMaster?.DeleteAccess === 'Y') ||
    //                 (UserType === 'Employee' &&
    //                   empData?.DeleteAccess === 'Y') ||
    //                 UserType === 'Admin'
    //                   ? statusFormatter(record)
    //                   : null
    //               }
    //             />
    //           )}
    //         </a>
    //       </Space>
    //     ) : null,
    // },
  ];
  const Productcolumns = [
    {
      title: 'Sl.No',
      key: 'sno',
      align: 'center',
      width: '100px',
      render: (text, object, index) => (
        <a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
      ),
    },
    {
      title: 'Product ',
      dataIndex: 'ProdName',
      key: 'ProdName',
      width: '150px',
      //
    },
     {
      title: 'Variant',
      dataIndex: 'ProdVariantName',
      key: 'ProdVariantName',
      width: '150px',
      //
    },
    {
      title: 'Qty',
      dataIndex: 'Qty',
      key: 'Qty',
      width: '150px',
      //
    },
   

    // {
    //   title: 'Chair Count',
    //   dataIndex: 'ChairCount',
    //   key: 'ChairCount',
    //   width: '100px',
    //   align: 'right',
    //   render: (text) => <a style={{ color: 'black' }}>{text}</a>,
    //   filteredValue: filteredInfo.ChairCount || null,
    //   onFilter: (value, record) => record.ChairCount.includes(value),
    //   sorter: (a, b) => a?.ChairCount?.length - b?.ChairCount?.length,
    //   sortOrder:
    //     sortedInfo.columnKey === 'ChairCount' ? sortedInfo.order : null,
    //   ellipsis: true,
    // },
    // {
    //   title: 'DineIn Type',
    //   dataIndex: 'DineInTypeName',
    //   key: 'DineInTypeName',
    //   render: (text) => <a style={{ color: 'black' }}>{text}</a>,
    //   filteredValue: filteredInfo.CompName || null,
    //   onFilter: (value, record) => record.DineInTypeName.includes(value),
    //   sorter: (a, b) => a?.DineInTypeName?.length - b?.DineInTypeName?.length,
    //   sortOrder:
    //     sortedInfo.columnKey === 'DineInTypeName' ? sortedInfo.order : null,
    //   ellipsis: true,
    // },
    // {
    //   title: 'Chair Level Serve',
    //   dataIndex: 'ChairLevelSer',
    //   key: 'ChairLevelSer',
    //   render: (text) => <a style={{ color: 'black' }}>{text}</a>,
    //   filteredValue: filteredInfo.ChairLevelSer || null,
    //   onFilter: (value, record) => record.ChairLevelSer.includes(value),
    //   sorter: (a, b) => a?.ChairLevelSer?.length - b?.ChairLevelSer?.length,
    //   sortOrder:
    //     sortedInfo.columnKey === 'ChairLevelSer' ? sortedInfo.order : null,
    //   ellipsis: true,
    // },
    // {
    //   title: 'Chair Name',
    //   dataIndex: 'ChairLevelSerDetails',
    //   key: 'ChairLevelSerDetails',
    //   width: '150px',
    //   render: (ChairLevelSerDetails) => (
    //     <a style={{ color: 'black' }}>
    //       {ChairLevelSerDetails?.length > 0
    //         ? ChairLevelSerDetails?.map((item) => item.ChairName).join(',')
    //         : ' - '}
    //     </a>
    //   ),
    // },
    // {
    //   title: 'Action',
    //   key: 'Action',
    //   dataIndex: 'Action',
    //   render: (_, record, index) =>
    //     tabledata.length >= 1 ? (
    //       <Space size="middle">
    //         {record.ActiveStatus === 'A' ? (
    //           <a>
    //             <EditFilled
    //               style={{ color: '#1292EE' }}
    //               onClick={() =>
    //                 UserType === 'Super Admin' ||
    //                 (UserType === 'Super Admin User' &&
    //                   SAAccessCommonMaster?.UpdateAccess === 'Y') ||
    //                 (UserType === 'Employee' &&
    //                   empData?.UpdateAccess === 'Y') ||
    //                 UserType === 'Admin'
    //                   ? actionsFormatter(record, index)
    //                   : null
    //               }
    //             />
    //           </a>
    //         ) : (
    //           ''
    //         )}
    //         <a>
    //           {record.ActiveStatus === 'A' ? (
    //             <DeleteFilled
    //               style={{
    //                 color: '#FF4D4F',
    //               }}
    //               onClick={() =>
    //                 UserType === 'Super Admin' ||
    //                 (UserType === 'Super Admin User' &&
    //                   SAAccessCommonMaster?.DeleteAccess === 'Y') ||
    //                 (UserType === 'Employee' &&
    //                   empData?.DeleteAccess === 'Y') ||
    //                 UserType === 'Admin'
    //                   ? statusFormatter(record)
    //                   : null
    //               }
    //             />
    //           ) : (
    //             <ReloadOutlined
    //               style={{
    //                 color: '#52C41A',
    //               }}
    //               onClick={() =>
    //                 UserType === 'Super Admin' ||
    //                 (UserType === 'Super Admin User' &&
    //                   SAAccessCommonMaster?.DeleteAccess === 'Y') ||
    //                 (UserType === 'Employee' &&
    //                   empData?.DeleteAccess === 'Y') ||
    //                 UserType === 'Admin'
    //                   ? statusFormatter(record)
    //                   : null
    //               }
    //             />
    //           )}
    //         </a>
    //       </Space>
    //     ) : null,
    // },
  ];

  return (
    <div className="userPageTable">
      <div className="userPageContent">
        <div className="formAddNew">
          <Messages
            messageType={messageType}
            messageData={messageData}
            onComplete={onComplete}
          />
          <div>
            <FormHeader title={'Delivery Challan'} />
          </div>
          <div className="searchAddDiv">
            <div className="formSearch">
              <Search
                placeholder="Search"
                onSearch={onSearch}
                onSearchChange={onSearchChange}
              />
            </div>

            <Buttons
              buttonText={'Add New'}
              handleSubmit={() => handelAddButton()}
              disabled={addnewAccess}
              color="901D77"
              icon={<PlusOutlined />}
            >
              OPEN
            </Buttons>
          </div>
        </div>
        <div className="reportTable">
          <Tables
            columns={columns}
            data={tabledata}
            dataSource={tabledata}
            pagination={handlePageChange}
            onChange={handleChange}
          />
        </div>
      </div>
      <DefaultModal
        open={ProductShow}
        title={'Product Details'}
        footer={false}
        width={550}
        children={
          <>
            <div className="BundleOfferProdcatTable">
              <Tables
                columns={Productcolumns}
                data={ProductDetails}
                dataSource={ProductDetails}
                // pagination={handlePageChangeProdCat}
                // onChange={handleChange}
              />
            </div>
          </>
        }
        handleCancel={() => {
          setProductShow(false);
        }}
      />
      <DefaultModal
        width={400}
        open={iSEmail}
        title="User Mail"
        handleCancel={() => setiSEmail(false)}
        footer={false}
        children={
          <div>
            <Form
              form={form}
              layout="vertical"
              onFinish={handleSendEmailWithEnteredEmail}
            >
              <Form.Item
                label="Mail ID"
                name="email"
                rules={[
                  { required: true, message: 'Email is required' },
                  { type: 'email', message: 'Enter a valid email address' },
                ]}
              >
                <Input placeholder="Enter your email" />
              </Form.Item>

              <Button type="primary" htmlType="submit">
                Submit
              </Button>
            </Form>
          </div>
        }
      />
      <div style={{ display: 'none' }} >
      <DeliveryPrint 
              PrintingData1={[PrintingData]}
              DCprinterTemplateStyle={DCPrintTemplateStyle}
              DCPrintTemplateDtl={DCPrintTemplateDtl}
            />
      </div>
    </div>
  );
};
export default DeliveryChallanList;