import { InvoiceStatusEnum } from '@gtpl/shared-models/masters';
import { GrnIdReq, InvoiceStatusReq, RMInvoicePrintReq } from '@gtpl/shared-models/raw-material-procurement';
import { RMGrnService } from '@gtpl/shared-services/raw-material-procurement';
import {Button, Card, Col, Divider, Form, Input, Modal, Result, Row, Select, Tabs} from 'antd'
import Table, { ColumnProps } from 'antd/lib/table';
import React, { useEffect, useRef, useState } from 'react'
import { useHistory } from 'react-router-dom';
import {EyeOutlined} from '@ant-design/icons'
import Highlighter from 'react-highlight-words';

import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { useForm } from 'antd/lib/form/Form';
import {SearchOutlined,UndoOutlined} from '@ant-design/icons'
import { PrinterOutlined } from '@ant-design/icons'
import RMInvoicePrint from 'libs/pages/logistics/logistics-components/documents/src/lib/rm-invoice-print';
import { SupplierTypeEnum } from '@gtpl/shared-models/common-models';


const { TabPane } = Tabs;
const {Option} = Select;

export const PriceAcceptanceForm = () => {
    const [page,setPage] = useState<number>(1)
    const rmGrnService = new RMGrnService()
    const [grnInfo,setGrnInfo] = useState<any[]>([])
    const history = useHistory()
    const searchInput = useRef(null);
    const [tabName,setTabName] = useState<any>(InvoiceStatusEnum.UNDER_APPROVAL)
    const [itemsInfo,setItemsInfo] = useState<any[]>([])
    const [modalOpen,setModalOpen] = useState<boolean>(false)
    const role = JSON.parse(localStorage.getItem('role'))
    const [form] = Form.useForm()
    const [grnNumbers,setGrnNumbers] = useState<any[]>([])
    const [indentNumber,setIndentNumber] = useState<any[]>([])
    const [selectedRMInvoicePrint, setSelectedRMInvoicePrint] = useState<any>([]);
    const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
    const [rmInvoicePrint, setRMInvoicePrint] = useState<number>()
    const [searchText, setSearchText] = useState('');
const [searchedColumn, setSearchedColumn] = useState('');


    useEffect(() => {
        getGrnInfo(InvoiceStatusEnum.UNDER_APPROVAL)
        getGrnNumbers(InvoiceStatusEnum.UNDER_APPROVAL)
        getIndentNumbers(InvoiceStatusEnum.UNDER_APPROVAL)
    },[])

    const getGrnNumbers = (val) => {
        const req = new InvoiceStatusReq(val)
        rmGrnService.getGrnNumberDropdownForPriceApproval(req).then(res => {
            if(res.status){
                setGrnNumbers(res.data)
            }
        })
    }

    const getIndentNumbers = (val) => {
        const req = new InvoiceStatusReq(val)
        rmGrnService.getIndentNumberDropdownForPriceApproval(req).then(res => {
            if(res.status){
                setIndentNumber(res.data)
            }
        })
    }

    const getGrnInfo = (val) => {
        const req= new InvoiceStatusReq(val)
        if(form.getFieldValue('grnId') != undefined){
            req.grnId = form.getFieldValue('grnId')
        }
        if(form.getFieldValue('indentId') != undefined){
            req.indentId = form.getFieldValue('indentId')
        }
        rmGrnService.getGrnInfoForPriceAccpetance(req).then(res => {
            if(res.status){
                setGrnInfo(res.data)
            }else{
                setGrnInfo([])
            }
        })
    }

    const onAccept = (rowData) => {
        const req = new GrnIdReq(rowData.grnId,role)
        rmGrnService.updateInvoiceStatus(req).then(res => {
            if(res.status){
                AlertMessages.getSuccessMessage(res.internalMessage)
                const index = grnInfo.findIndex(e => {
                    return(e.grnId == rowData.grnId)
                })
                grnInfo.splice(index,1)
                setGrnInfo([...grnInfo])
            }else{
                AlertMessages.getErrorMessage(res.internalMessage)
            }
        })
    }
    
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 columns : ColumnProps<any>[] = [
        {
            title: 'S No',
            key: 'sno',
            width: '70px',
            responsive: ['sm'],
            render: (text, object, index) => (page - 1) * 10 + (index + 1)
        },
        {
            title:'Grn Number',
            dataIndex:'grnNumber',
            ...getColumnSearchProps('grnNumber'),
        sorter: (a, b) => a.grnNumber.localeCompare(b.grnNumber),
        sortDirections: ['descend', 'ascend'],
        },
        {
            title:'Indent Number',
            dataIndex:'indentNumber',
            ...getColumnSearchProps('indentNumber'),
        sorter: (a, b) => a.indentNumber.localeCompare(b.indentNumber),
        sortDirections: ['descend', 'ascend'],
        },
        {
            title:'Supplier Type',
            dataIndex:'supplierType',
            filters: [
                {
                  text: 'Farmer',
                  value: SupplierTypeEnum.FARMER
                },
                {
                  text: 'Agent',
                  value: SupplierTypeEnum.AGENT
                },
              ],
              filterMultiple: false,
              onFilter: (value, record) => 
              {
                // === is not work
                return record.harvestType === value;
              },
        },
        {
            title:'Supplier Code',
            dataIndex:'supplierCode',
            ...getColumnSearchProps('supplierCode'),
            sorter: (a, b) => a.supplierCode.localeCompare(b.supplierCode),
            sortDirections: ['descend', 'ascend'],
        },
        {
            title:'Supplier Name',
            dataIndex:'supplierName',
            ...getColumnSearchProps('supplierName'),
            sorter: (a, b) => a.supplierName.localeCompare(b.supplierName),
            sortDirections: ['descend', 'ascend'],
        },
        {
            title:'Invoice Number',
            dataIndex:'invoiceNumber',
            
            ...getColumnSearchProps('invoiceNumber'),
            sorter: (a, b) => a.invoiceNumber.localeCompare(b.invoiceNumber),
            sortDirections: ['descend', 'ascend'],
        },
        {
            title:"Bill To",
            dataIndex:"farmerName",
            ...getColumnSearchProps('farmerName'),
            sorter: (a, b) => a.farmerName.localeCompare(b.farmerName),
            sortDirections: ['descend', 'ascend'],


        },
        {
            title:'Action',
            dataIndex:'action',
            render:(text,record) => {
                return(
                    <span>
                        {
                            tabName == InvoiceStatusEnum.UNDER_APPROVAL ? (<><Button onClick={() => onAccept(record)}>Accept</Button><Divider type='vertical'/></>) : (<></>)
                        }
                        <Button onClick={() => detailViewHandler(record)}><EyeOutlined/></Button>
                        {
                            tabName == InvoiceStatusEnum.APPROVED ? (<> <Button onClick={() => displayPrint(record)}><PrinterOutlined/></Button></>) : (<></>)       
                        }

                    </span>
                )
            }
        }

    ]
console.log(selectedRMInvoicePrint,"selectedRMInvoicePrint")
    const displayPrint = (data: RMInvoicePrintReq) => {
        console.log(data,"data")
        setSelectedRMInvoicePrint(data);
        setIsModalVisible(true);
      };

    const detailViewHandler = (rowData) => {
        setItemsInfo(rowData.grnItemInfo)
        setModalOpen(true)
    }

    const itemColumns : ColumnProps<any>[] = [
        {
            title: 'S No',
            key: 'sno',
            width: '70px',
            responsive: ['sm'],
            render: (text, object, index) => (page - 1) * 10 + (index + 1)
        },
        {
            title:'Batch Number',
            dataIndex:'batchNumber'
         

        },
        {
            title:'Lot Number',
            dataIndex:'lotNumber',
            
            render:(text,record) => {
                return(
                    <>
                    {record.lotNumber ? record.lotNumber : '-'}
                    </>
                )
            }
        },
        {
            title:'Type',
            dataIndex:'type',
            render:(text,record) => {
                return(
                    <>
                    {record.type ? record.type : '-'}
                    </>
                )
            }
        },
        {
            title:'Defect',
            dataIndex:'defect',
            render:(text,record) => {
                return(
                    <>
                    {record.defect ? record.defect : '-'}
                    </>
                )
            }
        },
        {
            title:'Count',
            dataIndex:'count'
        },
        {
            title:'Quantity',
            dataIndex:'quantity'
        },
        {
            title:'Price',
            dataIndex:'price'
        },
        {
            title:'Actual Price',
            dataIndex:'approvedPrice',
            render:(text,record) => {
                return(
                    <>
                    {record.approvedPrice ? record.approvedPrice : '-'}
                    </>
                )
            }
        },
        {
            title:'Total Amount',
            dataIndex:'totalAmount',
            render:(text,record) => {
                return(
                    <>
                    {record.totalAmount ? record.totalAmount : '-'}
                    </>
                )
            }
        },
        {
            title:'Remarks',
            dataIndex:'remarks',
            render:(text,record) => {
                return(
                    <>
                    {record.remarks ? record.remarks : '-'}
                    </>
                )
            }
        },
    ]

    const onTabChange = (val) => {
        setTabName(val)
        getGrnInfo(val)
        getGrnNumbers(val)
        getIndentNumbers(val)
    }

    const onSearch = () => {
        getGrnInfo(tabName)
    }

    const onReset = () => {
        form.resetFields()
        getGrnInfo(InvoiceStatusEnum.APPROVED)
        getGrnNumbers(InvoiceStatusEnum.UNDER_APPROVAL)
        getGrnNumbers(InvoiceStatusEnum.APPROVED)

        getIndentNumbers(InvoiceStatusEnum.UNDER_APPROVAL)
        getIndentNumbers(InvoiceStatusEnum.APPROVED)
    }

    return(
        <Card title={<span style={{ color: 'white' }}>Invoice View</span>}
        style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
        extra={<Button onClick={() => {history.push('/rm-invoice-form')}}>Create</Button>}>
            <Form form={form} layout='vertical'>
                <Row gutter={24}>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 6 }}>
                    <Form.Item label='Grn Number' name='grnId'>
                        <Select allowClear showSearch optionFilterProp='children' placeholder='Select Grn Number'>
                            {grnNumbers.map(e => {
                                return(
                                    <Option key={e.grnId} value={e.grnId}>{e.grnNumber}</Option>
                                )
                            })}
                        </Select>
                    </Form.Item>
                    </Col>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 6 }}>
                    <Form.Item label='Indent Number' name='indentId'>
                        <Select allowClear showSearch optionFilterProp='children' placeholder='Select Indent Number'>
                            {indentNumber.map(e => {
                                return(
                                    <Option key={e.indentId} value={e.indentId}>{e.indentNumber}</Option>
                                )
                            })}
                        </Select>
                    </Form.Item>
                    </Col>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 3 }} style={{marginTop:'2.5%'}}>
                    <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:'2.5%'}}>
                    <Form.Item>
                        <Button danger icon={<UndoOutlined/>} onClick={onReset}>Reset</Button>
                    </Form.Item>
                    </Col>
                </Row>
            </Form>
            <Tabs onChange={onTabChange}>
                <TabPane key={InvoiceStatusEnum.UNDER_APPROVAL} tab='Under Acceptance'>
                    { grnInfo.length > 0 ? (<Table columns={columns} pagination={{
              onChange(current) {
                setPage(current);
              },
              pageSizeOptions: ['20', '30', '40', '50'],
              showSizeChanger: true
            }} dataSource={grnInfo}/>) : (<> <Result status="warning" title="No Data Found"/></>)}
                </TabPane>
                <TabPane key={InvoiceStatusEnum.APPROVED} tab='Accpeted'>
                { grnInfo.length > 0 ? (<Table columns={columns} pagination={{
              onChange(current) {
                setPage(current);
              },
              pageSizeOptions: ['20', '30', '40', '50'],
              showSizeChanger: true
            }} dataSource={grnInfo}/>) : (<><Result status="warning" title="No Data Found"/></>)}
                </TabPane>
            </Tabs>
            <Modal visible={modalOpen} onCancel={() => setModalOpen(false)} width={'80%'} footer={[]}>
                <Table columns={itemColumns} dataSource={itemsInfo} pagination={false}/>
            </Modal>
            <Modal visible={isModalVisible} onCancel={() => setIsModalVisible(false)} width={'80%'} footer={[]}>
                <RMInvoicePrint invoiceNumber={selectedRMInvoicePrint.invoiceNumber}/>
            </Modal>
        </Card>
    )

}

export default PriceAcceptanceForm