import  { useEffect, useRef, useState } from 'react';
import {Button, Card, Col, DatePicker, Form, Input, Modal, Popconfirm, Radio, Row, Select, Space, Table, Tooltip} from 'antd'
import './pages-finance-collections.css';
import { CheckCircleOutlined, CloseCircleOutlined, RightSquareOutlined, EyeOutlined, EditOutlined, FormOutlined,SearchOutlined ,IssuesCloseOutlined} from '@ant-design/icons';
import Highlighter from 'react-highlight-words';
import moment from 'moment';
import TextArea from 'antd/lib/input/TextArea';
import { CollectionPaymentTypes, TransactionPaymentType, TransactionStatus, TransactionType } from '@gtpl/shared-models/common-models';
// import {CollectionsService} from '@gtpl/shared-services/finance'
// import { CollectionsReq, DdbCollectionsReq, PaymentTypeReq } from '@gtpl/shared-models/finance';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import React from 'react';
import { CollectionsService } from 'libs/shared-services/finance/src/lib/collections-service';
import { DdbCollectionsReq } from 'libs/shared-models/finance/src/lib/collections-req';
import { PaymentTypeReq } from 'libs/shared-models/finance/src/lib/payment-req';
import { PortOfEntryCodes } from '@gtpl/shared-models/sale-management';
import {  SaleOrderService } from '@gtpl/shared-services/sale-management';
import { PurchasesProductService } from '@gtpl/shared-services/finance';

/* eslint-disable-next-line */
export interface DDBCollectionsProps {
    tab:string
}

export function DDBCollections(props: DDBCollectionsProps) {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState<number>(100);
  const [data, setData] = useState([])
  const [searchText, setSearchText] = useState("");
  const [searchedColumn, setSearchedColumn] = useState("");
  const searchInput = useRef(null);
  const [isModalVisible,setIsModalVisible] = useState<boolean>(false)
  const [acceptButton,setAcceptButton] = useState<boolean>(false)
  const [collapse,SetCollapse] = useState<boolean>(false)
  const { Option } = Select;
  const [form] = Form.useForm();
  const [form2] = Form.useForm();
  const service = new CollectionsService()
  const [soData, setSoData] = useState<any>()
  const [buyers, setBuyers] = useState([])
  const [amt, setAmt] = useState("");
  const [fobVal, setFobVal] = useState("");
  const [exchangeRateValue, setExchangeRateValue] = useState("");
  const [years,setYears] = useState<any[]>([])
  const invoiceDataService = new SaleOrderService;
    const [factoriesData, setFactoriesData] = useState([]);
    const purchaseService = new PurchasesProductService()


  useEffect(() => {
    getData(props.tab)
    getBuyers(props.tab)
    getAllFinancialYear()
    getAllCompanyNames()
}, [props.tab])

const getAllFinancialYear  = () => {
  invoiceDataService.getAllFinancialYear().then(res => {
    if (res.status) {
      setYears(res.data);
    } else {
      if (res.intlCode) {
        setYears([]);
        AlertMessages.getErrorMessage(res.internalMessage);
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    }
  }).catch(err => {
    setYears([]);
    AlertMessages.getErrorMessage(err.message);
  })
}

     const getAllCompanyNames = () => {
    purchaseService.getAllCompanys().then((res) => {
        if (res.status) {
            setFactoriesData(res.data)
        }
    })
}

const getBuyers = (tab) => {
    const req = new PaymentTypeReq(tab)
   
    service.getBuyers(req).then((res)=>{
      if(res.status){
      setBuyers(res.data)
      }
    })
  }
  const getData = (val) => {
    const req = new PaymentTypeReq(props.tab)
    if(form2.getFieldValue('buyer') !== undefined){
      req.buyer = form2.getFieldValue('buyer')
    }
    if(form2.getFieldValue('financialYear') !== undefined){
      req.financeYear = form2.getFieldValue('financialYear')
    }

     if(form2.getFieldValue('unit') !== undefined){
      req.unitId = form2.getFieldValue('unit')
    }
    service.getCollection(req).then((res)=>{
      if (res.status) {
        setData(res.data); 
      } else {
        setData([]);       
      }
    }).catch((err) => {
      console.error('Error fetching data:', err);
      setData([]);
    });
  }

  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };
  const handleReset = (clearFilters) => {
    clearFilters();
    setSearchText("");
  };

  ;
  const getColumnSearchProps = (dataIndex: string) => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters,
    }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={searchInput}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={(e) =>
            setSelectedKeys(e.target.value ? [e.target.value] : [])
          }
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ width: 188, marginBottom: 8, display: "block" }}
        />
        <Button
          type="primary"
          onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
          icon={<SearchOutlined />}
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button
          size="small"
          style={{ width: 90 }}
          onClick={() => {
            handleReset(clearFilters);
            setSearchedColumn(dataIndex);
            confirm({ closeDropdown: true });
          }}
        >
          Reset
        </Button>
      </div>
    ),
    filterIcon: (filtered) => (
      <SearchOutlined
        type="search"
        style={{ color: filtered ? "#1890ff" : undefined }}
      />
    ),
    onFilter: (value, record) =>
      record[dataIndex]
        ? record[dataIndex]
          .toString()
          .toLowerCase()
          .includes(value.toLowerCase())
        : false,
    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        setTimeout(() => searchInput.current.select());
      }
    },
    render: (text) =>
      text ? (
        searchedColumn === dataIndex ? (
          <Highlighter
            highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
            searchWords={[searchText]}
            autoEscape
            textToHighlight={text.toString()}
          />
        ) : (
          text
        )
      ) : null,
  });
const payment =(val) =>{
  console.log(val,"oppp9900")
  setAmt(val.ddbAmt)
  setFobVal(val.fobValue)
  setExchangeRateValue(val.exchangeRate)
setIsModalVisible(true)
setSoData(val)
}

useEffect(() => {
  if (isModalVisible && soData) {
    form.setFieldsValue({
      shippingBill: soData?.shippingBillNo || '',
      shippingDate: soData?.shippingBillDate ? moment(soData.shippingBillDate) : null,
    });
  }
}, [isModalVisible, soData,form]);




const getPortName = (portOfLoading) => {
  const port = PortOfEntryCodes.find((item) => Number(item.value) === Number(portOfLoading));
  
  return port ? port.name : '-';
};
const columns: any[] = [
    {
      title: 'S No', dataIndex: 'sNo', render: (text, object, index) => {
        if (index == data.length) {
          return null;
        } else {
          return index + 1
        }
      },
      width: 60,

    },
    {
      title: 'PO Number', 
     width: 200,
     dataIndex: 'poNum',
     render: (text: any, record: any) => { return record.poNum ? record.poNum : '-' } ,
     sorter: (a, b) => a.poNum.localeCompare(b.poNum),
     sortDirections: ['descend', 'ascend'],
    ...getColumnSearchProps('poNum')},
    {
       title: 'Invoice Number', 
      width: 200,
      dataIndex: 'invoiceNumber',

        render: (text: any, record: any) => { return record.invoiceNumber ? record.invoiceNumber : '-' } ,
        sorter: (a, b) => a.invoiceNumber.localeCompare(b.invoiceNumber),
      sortDirections: ['descend', 'ascend'],
     ...getColumnSearchProps('invoiceNumber')},
{
  title: 'Invoice Date',
  width: 200,
  dataIndex: 'invoiceDate',
  sorter: (a, b) => {
    console.log('Sorting:', a.invoiceDate, b.invoiceDate);
    const aVal = moment(a.invoiceDate).startOf('day').valueOf();
    const bVal = moment(b.invoiceDate).startOf('day').valueOf();
    console.log('Sort values:', aVal, bVal);
    return aVal - bVal;
  },
  sortDirections: ['descend', 'ascend'],
  render: (date: string) => {
    console.log('Render date:', date);
    return moment(date).format('YYYY-MM-DD');
  },
  ...getColumnSearchProps('invoiceDate'),
}
,


     {
      title: 'Buyer', 
     width: 200,
     dataIndex: 'buyer',
       render: (text: any, record: any) => { return record.buyer ?  record.buyer : '-' },
       sorter: (a, b) => (a.buyer || '').localeCompare(b.buyer || ''),
       sortDirections: ['descend', 'ascend'],
    },
    {
       title: 'SHIPPING BILL NO.', 
      width: 200,
      dataIndex: 'shippingBillNo',

        sorter: (a, b) => a.shippingBillNo-b.shippingBillNo,
      sortDirections: ['descend', 'ascend'],
     },
     {
      title: 'SHIPPING BILL DATE ', 
     width: 200,
     dataIndex: 'shippingBillDate',
     sorter: (a, b) => {
      if (!a.shippingBillDate && !b.shippingBillDate) {
          return 0;
      }
      if (!a.shippingBillDate) {
          return -1;
      }
      if (!b.shippingBillDate) {
          return 1;
      }
      return moment(a.shippingBillDate).unix() - moment(b.shippingBillDate).unix();
  },
     render: (text: any, record: any) => { return record.shippingBillDate ? moment(record.shippingBillDate).format('DD-MM-YYYY') : '-' },
    },
    {
       title: 'LEO DATE', 
       width: 200,
       dataIndex: 'eta',
         render: (text: any, record: any) => { return record.eta ? moment(record.eta).format('DD-MM-YYYY') : '-' },
         sorter: (a, b) => a.eta.localeCompare(b.eta),
       sortDirections: ['descend', 'ascend'],
     },
     {
      title: 'BRC REL DATE AS PER S.B', 
     width: 200,
     dataIndex: 'paymentTerms',
       render: (text: any, record: any) => { return record.paymentTerms ?  record.paymentTerms : '-' },
       sorter: (a, b) => a.paymentTerms.localeCompare(b.paymentTerms),
     sortDirections: ['descend', 'ascend'],
    },
   
   
    {
      title: 'FOB VALUE(INR)', 
     width: 100,
     dataIndex: 'fobValue',

       render: (text: any, record: any) => {
        console.log(record.fobValue,'rrrrrrr');
         return record.fobValue ? (Number(record.exchangeRate) * Number(record.fobValue)).toFixed(2) : '-' },
       sorter: (a, b) => a.fobValue.localeCompare(b.fobValue),
     sortDirections: ['descend', 'ascend'],
   //  ...getColumnSearchProps('qtyStock')
    },
    {
     title: 'Duty Draw Back Value(INR)', 
    width: 100,
    dataIndex: 'fobValue',

      render: (text: any, record: any) => { 
       console.log(Number(record.exchangeRate),'inr value');
       
       return record.fobValue ?   Number(0.033*Number(record.exchangeRate) * Number(record.fobValue)).toFixed(2):'-'},
      sorter: (a, b) => a.fobValue.localeCompare(b.fobValue),
    sortDirections: ['descend', 'ascend'],
  //  ...getColumnSearchProps('qtyStock')
   },
    {
        title: 'CHA', 
       width: 100,
       dataIndex: 'cha',
 
         render: (text: any, record: any) => { return record.cha ? record.cha : '-' },
         sorter: (a, b) => a.cha-b.cha,
       sortDirections: ['descend', 'ascend'],
     //  ...getColumnSearchProps('qtyStock')
      },
      {
         title: 'PORT', 
        width: 100,
        dataIndex: 'port',
  
        render: (text, record) => getPortName(record.port),
          sorter: (a, b) => a.port-b.port,
        sortDirections: ['descend', 'ascend'],
      //  ...getColumnSearchProps('qtyStock')
       },
      
       
    {
       title: ' INVOICE VALUE IN USD ', 
       dataIndex: 'invAmtUsd',
       width: 200,

        render: (text: any, record: any) => { return record.invAmtUsd ? record.invAmtUsd : '-' },
        sorter: (a, b) => a.invAmtUsd-b.invAmtUsd,
      sortDirections: ['descend', 'ascend'],
     ...getColumnSearchProps('invAmtUsd')
     },
     {
      title: `Action`,
      dataIndex: 'action',
      fixed: 'right', 
      render: (text, rowData) => {
      return(<FormOutlined title='Payment' onClick={() => payment(rowData)}/> )
     }
     }

  ]
  let createdUser="";
  // if(!props.isUpdate){
    createdUser= localStorage.getItem("createdUser");
    // let unitId = localStorage.getItem("unit_id")

  // }
    
const save = (val) =>{
  // if(soData.ddbAmt >=  Number(val.receivedAmt)){
    const req= new DdbCollectionsReq(soData.buyerId,Number(Number(0.033 * Number(fobVal)*Number(exchangeRateValue)).toFixed(2)),soData.invoiceNumber,val.receivedAmt,soData.soId,val.receivedDate,val.shippingBill,val.shippingDate,val.remarks,createdUser,Number(soData.unitId
    ),CollectionPaymentTypes.DUTY_DRAW_BACK,val.receivedAmtInr,val.exchangeRate,soData.poNum)

//   const req= new CollectionsReq(val.bankCharges,soData.buyerId,soData.bankId,val.buyerShortPayment,val.dueDate,soData.eta,soData.etd,soData.totalAmount,soData.invoiceNumber,soData.paymentTermsId,soData.poNum,val.receivedAmt,soData.soId,val.receivedDate,val.transactionStatus,val.transactionType,val.remarks,createdUser)
  service.generateDdbPayment(req).then((res)=>{
    if(res.status){
      AlertMessages.getSuccessMessage(res.internalMessage)
      // console.log('oooooooooooooooooooooooooftrgc');
      form.resetFields()
      setIsModalVisible(false)
      getData(props.tab)
    }
  })
// }
// else{
//   AlertMessages.getErrorMessage(`Sum of buyer short payment and Received amount shouldn't be more than invoice amount`)
// }
}
const cancel = () =>{
  setIsModalVisible(false)
  form.resetFields()
}
const search =() =>{
    getData(props.tab)
   }
// const submit =() =>{
//   if(form1.getFieldValue('paymentType')===CollectionPaymentTypes.EXPORT_RECEIVABLES){
//   getData()
//  }else if(form1.getFieldValue('paymentType')===CollectionPaymentTypes.DUTY_DRAW_BACK){
//   console.log('ppppppppppp');
// }else{
//   console.log('ooooooooooooooooo');
//  }
// }

const onExchangeRateChange = (e: any) => {
  const exchangeRate = e.target.value;
  const receivedAmount = form.getFieldValue("receivedAmt")


  if (receivedAmount && exchangeRate) {
    const receivedAmtInr = Number(receivedAmount) * parseFloat(exchangeRate);
    form.setFieldsValue({ receivedAmtInr: receivedAmtInr });
  } else {
    form.setFieldsValue({ receivedAmtInr: "" });
  }
};

const onReceivedChange = (e: any) => {
  const receivedAmount = e.target.value;
  const exchangeRate = form.getFieldValue("exchangeRate")


  if (receivedAmount && exchangeRate) {
    const receivedAmtInr = Number(receivedAmount) * parseFloat(exchangeRate);
    // form.setFieldsValue({ receivedAmtInr: receivedAmtInr });
  } else {
    form.setFieldsValue({ receivedAmtInr: "" });
  }
}

let fobCalculation
fobCalculation =  Number(0.033 * Number(fobVal)).toFixed(2)
 console.log(fobCalculation,"pokk")
 const onReset = () => {
  form.resetFields();
}
  return (
    <>
    <Card size="small" title={<span style={{ color: 'white' }} >{CollectionPaymentTypes.DUTY_DRAW_BACK}</span>}
            style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
>
    
      {data.length > 0 ? (
         <><Form form={form2} onFinish={search}>
                      <Row gutter={24}>
                          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
                          
                                                  <Form.Item label='Unit' name='unit'>
                                                    <Select
                                                      placeholder="Select Unit"
                                                      allowClear
                                                      showSearch
                                                      optionFilterProp="children"
                                                      filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                                      dropdownMatchSelectWidth = {false}
                                                    >
                                                   {factoriesData.map(dropData => {
                                                      console.log(factoriesData,'factoriesDatafactoriesDatafactoriesData')
                                                      return <Option value={dropData.companyId}>{dropData.company}</Option>
                                                  })}
                          
                                                    </Select>
                          
                                                  </Form.Item>
                                                </Col>
                          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>

                              <Form.Item label='Buyer' name='buyer'>
                                  <Select
                                      placeholder="Select buyer"
                                      allowClear
                                      showSearch
                                      optionFilterProp="children"
                                      filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                      
                                  >

                                      {buyers.map(dropData => {
                                          return <Option value={dropData.buyerId}>{dropData.buyer}</Option>;
                                      })}

                                  </Select>

                              </Form.Item>
                          </Col>
                          <Col xs={24} sm={12} md={6} lg={6} xl={6}>
              <Form.Item name="financialYear" label="Financial Year">
                <Select
                  showSearch
                  placeholder="Select Financial Year"
                  optionFilterProp="children"
                  allowClear
                >
                  {years.filter(year => year.financialYear !== null).map((y: any) => (
                    <Select.Option key={y.financialYear} value={y.financialYear}>
                      {y.financialYear}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
                                          <Form.Item>
                              <Space>
                                <Button type="primary" htmlType="submit">
                                  Search
                                </Button>
                                <Button type="primary" htmlType="reset" onClick={() => onReset()}>
                                  Reset
                                </Button>
                              </Space>
                            </Form.Item>
                                          </Col>
                      </Row>
                  </Form><Table
                          size='small'
                          columns={columns}
                          dataSource={data} /></>):('No data found')}
    </Card>
    <Modal width={'90%'} footer={null} visible={isModalVisible} style={{background:'#69c0ff',textAlign:'center',color:'white'}} title={`Payment (To Be Receive : ${fobVal?  Number(0.033 * Number(fobVal)*Number(exchangeRateValue)).toFixed(2):'-'})`}
             onCancel={cancel} >
    <Card >
    <Form form={form} onFinish={save}>
    <Row gutter={24}>
 
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 8 }}>
          <Form.Item label='RECEIVED DATE' name='receivedDate' rules={[{ required: true, message: 'Missing Received Date' }]}>
          <DatePicker style={{width:'100%'}}/>
          </Form.Item>
          </Col>
          {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 8 }}>
          <Form.Item label='RECEIVED AMOUNT IN USD' name='receivedAmt' rules={[
    { required: true, message: "Missing Received Amount" },
    ({ getFieldValue }) => ({
      validator(_, value) {
        if (!value || parseFloat(value) <= parseFloat(fobCalculation)) {
          return Promise.resolve();
        }
        return Promise.reject(new Error("Received Amount cannot be greater than payment"));
      },
    }),
  ]} >
                <Input placeholder="Enter Amount"  onChange ={onReceivedChange} />
              </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 8 }}>
                    <Form.Item label='Exchange Rate' name='exchangeRate' rules={[{ required: true, message: 'Missing Exchange Rate' }]}>
                          <Input placeholder="Enter Exchange Rate" onChange={onExchangeRateChange}   />
                        </Form.Item>
          </Col> */}
          
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 8 }}>
                    <Form.Item label='RECEIVED AMOUNT IN INR' name='receivedAmtInr'>
                          <Input placeholder="Received Amount in INR "    />
                        </Form.Item>
           </Col>
         
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 8 }}>
          <Form.Item label='SHIPPING BILL NO' name='shippingBill' rules={[{ required: true, message: 'Missing Shipping Bill No' }]}>
                <Input placeholder="Enter Shipping Bill No"  />
              </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 8 }}>
          <Form.Item label='SHIPPING BILL Date' name='shippingDate' rules={[{ required: true, message: 'Missing Shipping Date' }]}>
          <DatePicker style={{width:'100%'}}/>
          </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 8 }}>
          <Form.Item label='Remarks' name='remarks'>
            <TextArea/>
          </Form.Item>
          </Col>
        
                    </Row>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
                        <Form.Item >
                            <Button type='primary' htmlType='submit'>Save</Button>
                        </Form.Item>
                    </Col>
                </Form>
                </Card>
      </Modal></>
  );
}

export default DDBCollections;