import { Button, Card, Col, Form, Input, Modal, Row, Select, Tabs } from 'antd';
import Table, { ColumnProps } from 'antd/lib/table';
import React, { useEffect, useRef, useState } from 'react'
import { BarcodeOutlined, SearchOutlined, UndoOutlined } from '@ant-design/icons';
import Highlighter from 'react-highlight-words';
import { RMGrnService } from '@gtpl/shared-services/raw-material-procurement';
import { rmReweighmentreq } from '@gtpl/shared-models/raw-material-procurement';
import form from 'antd/lib/form';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Link } from 'react-router-dom';
import { HarvestTypes } from 'libs/shared-models/common-models/src/lib/enum';
import { PrinterOutlined, ReconciliationOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
import { RmWeighmentPrint } from 'libs/pages/logistics/logistics-components/documents/src/lib/raw-material-weighment-print';
import moment from 'moment';

export interface ReweighmentGridProps{
  grnId:any
  grnItemId:number
}
const {Option} = Select

const ReweighmentGrid = (props:ReweighmentGridProps) => {
const {TabPane} =Tabs;
const searchInput = useRef(null);
const [searchText, setSearchText] = useState('');
const [searchedColumn, setSearchedColumn] = useState('');
 const [exportdata ,setexportdata] = useState([]);
 const[invData,setinvData]= useState([]);
 const [farmerData ,setFarmerData] = useState([]);
const service = new RMGrnService();
const [form] = Form.useForm() 
const [billtoForm] = Form.useForm()
const [page, setPage] = React.useState(1);  
const [printDisable, setPrintVisable] = useState<boolean>(false);
const [printId, setPrintId] = useState<number>(null);




const handleEndCustomer=(value) =>{
  console.log(value);
  // setSelectedEndCustomer(value)
  getAllReweighmentDetails(value)
  

}

const handleUnit =(value) =>{
  getAllReweighmentDetails(value)


}
const handelCancel = () =>{
  setPrintVisable(false)
}

const onSearch = (value) => {
  getAllReweighmentDetails (value)
}

const onReset = (value) => {
  form.resetFields()
  billtoForm.resetFields()
  getInvDropDownData()
  getFarmerDropDown()
  getAllReweighmentDetails (value)
}



useEffect(()=>{
  getInvDropDownData()
  getFarmerDropDown()
  getAllReweighmentDetails('OPEN')
},[])


const  getInvDropDownData =() =>{
  service.getGrnDropDownDetails().then((res)=>{
    if(res.status){
      setinvData(res.data);
    }else{
      if(res.intlCode){
        AlertMessages.getErrorMessage(res.internalMessage);
      }else{
        AlertMessages.getErrorMessage(res.internalMessage);
      }
      setinvData([]);
    }
  })
  .catch((err) => {
    AlertMessages.getErrorMessage(err.message);
    setinvData([]);
  });
}


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


const getAllReweighmentDetails =(tabName) =>{
  const req = new rmReweighmentreq(tabName)
  if(form.getFieldValue('farmer') != undefined){
    req.farmerId = form.getFieldValue('farmer') 
  }
  if(form.getFieldValue('grnNumber') != undefined){
    req.grnId = form.getFieldValue('grnNumber') 
  }
  service.getReweighmentDetails(req).then(res =>{
    if(res.status){
      setexportdata(res.data);
  }else{
      setexportdata([])
      AlertMessages.getErrorMessage(res.internalMessage)
  }
  })
}

const openPrint = (val) => {
  setPrintVisable(true);
  setPrintId(val);
};


function handleSearch(selectedKeys, confirm, dataIndex) {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };

  function 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 onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
          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 openColumn: ColumnProps<any>[]=[

  {
    title: 'S No',
    key: 'id',
    width: '70px',
    responsive: ['md'],
    align: 'left',
    render: (text, object, index) => (page-1) * 10 +(index+1)


},
    {
        title:'Indent Number',
        key: 'indentCode',
        dataIndex:'indentCode',
        width : '70px',
        ...getColumnSearchProps('indentCode'),
        sorter: (a, b) => a.indentCode.localeCompare(b.indentCode),
        sortDirections: ['descend', 'ascend'],
      
    },
    {
        title:'Grn Number',
        dataIndex:'grnNumber',
        key:'grnNumber',
        width : '70px',
        ...getColumnSearchProps('grnNumber'),
        sorter: (a, b) => a.grnNumber.localeCompare(b.grnNumber),
        sortDirections: ['descend', 'ascend'],
      

    },
    {
        title:'Farmer',
        dataIndex:'farmer',
        key:'farmer',
        width : '70px',
        ...getColumnSearchProps('farmer'),
        sorter: (a, b) => a.farmer?.localeCompare(b.farmer),
        sortDirections: ['descend', 'ascend'],
      

    },
    {
      title:'Harvest Type',
      dataIndex:'harvestType',
      width : '70px',
      filters: [
        {
          text: 'Live Harvest',
          value: HarvestTypes.Live_Harvest
        },
        {
          text: 'Re Weighment',
          value: HarvestTypes.Re_Weighment
        },
      ],
      filterMultiple: false,
      onFilter: (value, record) => 
      {
        // === is not work
        return record.harvestType === value;
      },
    },
  
    {
        title:'Count',
        dataIndex:'count',
        key:'count',
        width : '70px',
        ...getColumnSearchProps('count'),
        sorter: (a, b) => a?.count.localeCompare(b?.count),
        sortDirections: ['descend', 'ascend'],
      

    },
    {
      title:'Reweighment Date',
      dataIndex:'reweighmentDate',
      key:'reweighmentDate',
      width : '70px',
      render: (text) => text ? moment(text)?.format('DD-MM-YYYY') : '',

  },
    
]


const closedColumn: ColumnProps<any>[]=[

  {
    title: 'S No',
    key: 'id',
    width: '70px',
    responsive: ['md'],
    align: 'left',
    render: (text, object, index) => (page-1) * 10 +(index+1)


},
    {
        title:'Indent Number',
        key:'indentCode',
        dataIndex:'indentCode',
        width : '70px',
        ...getColumnSearchProps('indentCode'),
        sorter: (a, b) => a.indentCode?.localeCompare(b?.indentCode),
        sortDirections: ['descend', 'ascend'],
      
    },
    {
      title:'Grn Number',
      dataIndex:'grnNumber',
      key:'grnNumber',
      width : '70px',
      ...getColumnSearchProps('grnNumber'),
      sorter: (a, b) => a?.grnNumber.localeCompare(b?.grnNumber),
      sortDirections: ['descend', 'ascend'],
    
    },
    {
      title: 'Farmer',
      dataIndex: 'farmer',
      key: 'farmer',
      width: '70px',
      ...getColumnSearchProps('farmer'),
      sorter: (a, b) => a?.farmer?.localeCompare(b?.farmer),
      sortDirections: ['descend', 'ascend'],
  
    },
    {
      title:'Harvest Type',
      dataIndex:'harvestType',
      width : '70px',
      filters: [
        {
          text: 'Live Harvest',
          value: HarvestTypes.Live_Harvest
        },
        {
          text: 'Re Weighment',
          value: HarvestTypes.Re_Weighment
        },
      ],
      filterMultiple: false,
      onFilter: (value, record) => 
      {
        // === is not work
        return record.harvestType === value;
      },
      // filterSearch: true,
      
    },
  
    
 
    {
      title:'Count',
      dataIndex:'count',
      key:'count',
      width : '70px',
      ...getColumnSearchProps('count'),
      sorter: (a, b) => a?.count.localeCompare(b?.count),
      sortDirections: ['descend', 'ascend'],
    

    },
    {
      title:'Reweightment Count',
      dataIndex:'reCount',
      key:'reCount',
      width : '70px',
      ...getColumnSearchProps('reCount'),
      sorter: (a, b) => a?.reCount.localeCompare(b?.reCount),
      sortDirections: ['descend', 'ascend'],
      render: (text, record) => (
        record.reCount?record.reCount:'-'
      )
    

  },
    {
        title:'Batch Number',
        dataIndex:'batchNumber',
        key:'batchNumber',
        width : '70px',
        ...getColumnSearchProps('batchNumber'),
        sorter: (a, b) => a.batchNumber?.localeCompare(b.batchNumber),
        sortDirections: ['descend', 'ascend'],
        render: (text, record) => 
          
            {return record.reCount != null ? (
          <Button
            type="link"
            icon={<PrinterOutlined />}
            onClick={() => openPrint(record.grnItemId)}
          >
            {text}
          </Button>
) : `${record.batchNumber}(No Reweighment is Done)`       
      


    }
  },
  {
    title:'Reweighment Date',
    dataIndex:'reweighmentDate',
    key:'reweighmentDate',
    width : '70px',
    render: (text) => text ? moment(text)?.format('DD-MM-YYYY') : '',

},
   

]

  const onTabChange = (val) => {
    console.log(val,'--------')
    getAllReweighmentDetails(val)
  }
  return (
    <div>
       <Card  size="small" title={<span style={{ color: 'white' }} >Rewighment View</span>}
            style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
            extra={
              <Link to ="/reweighment-form">
                <Button className="panel_button">Create </Button>
              </Link>
            }   ></Card>

      <Form form={form}>
      <Row gutter={24}>
      <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 6 }}style={{ marginRight: '20px' }}>
      <Form.Item name="farmer" label="Farmer" rules={[{ required: false }]} style={{ width: '300px' }}>
    <Select
        showSearch
        optionFilterProp="children"
        filterOption={(input, Option) => Option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
        placeholder="Select Farmer Name"
        allowClear
    >
        {farmerData ? farmerData
            .filter(endCust => endCust.farmer && endCust.farmer.trim() !== '')
            .map(endCust => (
                <Option key={endCust.farmerId} value={endCust.farmerId}>
                    {endCust.farmer}
                </Option>
            )) : ""}
    </Select>
</Form.Item>

                    </Col>
                  

                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 6 }}>
                    <Form.Item name="grnNumber" label="GRN No" rules={[{ required: false }]}>
                  <Select
                  showSearch
                  optionFilterProp="children"
                  filterOption ={(input, Option) => Option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  placeholder="Select GRN No"
                  // onChange={handleUnit}
                  allowClear
                  >
                     {invData?invData.map(endCust => {
                      return <Option key={endCust.grnNumber}  value={endCust.grnId}>{endCust.grnNumber}</Option>
                    }):""} 

                  </Select>
                    </Form.Item>
                    </Col>

                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 3 }} style={{marginTop:'0%'}}>
                    <Form.Item>
                    <Button type='primary' icon={<SearchOutlined/>} onClick={onSearch}>Search</Button>
                    </Form.Item>
                    </Col>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 2 }} style={{marginTop:'0%'}}>
                    
                    <Form.Item>
                    <Button danger icon={<UndoOutlined/>} onClick={onReset}>Reset</Button>
                    </Form.Item>
                    </Col>

                    
                    </Row>
      </Form>

      
                    






      <Tabs type ={'card'} tabPosition={'top'} defaultActiveKey="1" onChange={onTabChange}>
      <TabPane 
      tab={<span style={{ color: "green" }}>OPEN</span>}
       key="OPEN">
        <Table columns={openColumn} dataSource={exportdata}  pagination={{
            onChange(current) {
              setPage(current);
            }
          }} />
      </TabPane>
      <TabPane 
      tab={<span style={{ color: "green" }}>CLOSED</span>}
       key="CLOSED">
        <Table columns={closedColumn} dataSource={exportdata}   pagination={{
            onChange(current) {
              setPage(current);
            }
          }}/>
      </TabPane>
    </Tabs>
    <Modal
        key={'modal' + Date.now()}
        width={'80%'}
        style={{ top: 30, alignContent: 'right' }}
        visible={printDisable}
        // title={'Raw Material GRN Print'}
        onCancel={handelCancel}
        footer={null}
      >
        <RmWeighmentPrint grnItemId= {printId}/>
      </Modal>
      
        
    </div>



  )
}

export default ReweighmentGrid