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 { 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 Highlighter from 'react-highlight-words';
import { GrnInvoiceNumberRequest } from '@gtpl/shared-models/procurement-management';
import moment from 'moment';


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

export const RMInvoiceView = () => {
    const [page,setPage] = useState<number>(1)
    const rmGrnService = new RMGrnService()
    const [grnInfo,setGrnInfo] = useState<any[]>([])
    const history = useHistory()
    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 searchInput = useRef(null);
    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.getRmInvoiceInfo(req).then(res => {
            if(res.status){
                setGrnInfo(res.data)
            }else{
                setGrnInfo([])
            }
        })
    }

    const getInvItemsInfo = (invNum) => {
        const req = new GrnInvoiceNumberRequest(invNum)
        rmGrnService.getRmInvoiceItemsInfo(req).then(res => {
            if(res.status){
                setItemsInfo(res.data)
                setModalOpen(true)
            }else{
                setItemsInfo([])
            }
        })
    }

    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',
            ...getColumnSearchProps('supplierType'),
            sorter: (a, b) => a.supplierType.localeCompare(b.supplierType),
            sortDirections: ['descend', 'ascend'],
        },
        {
            title:'Supplier Code',
            dataIndex:'supplierCode',
            ...getColumnSearchProps('supplierCode'),
            sorter: (a, b) => a.supplierCode.localeCompare(b.supplierCode),
            sortDirections: ['descend', 'ascend'],
        },
        // {
        //     title :'Batch Number',
        //     dataIndex:'batchNumber',
        //     ...getColumnSearchProps('batchNumber'),
        //     sorter: (a, b) => a.batchNumber.localeCompare(b.batchNumber),
        //     sortDirections: ['descend', 'ascend'],

        // },
        {
            title:'Supplier Name',
            dataIndex:'supplierName',
            ...getColumnSearchProps('supplierName'),
            sorter: (a, b) => a.supplierName.localeCompare(b.supplierName),
            sortDirections: ['descend', 'ascend'],
        },
        {
            title:'Invoice Date',
            dataIndex:'invoiceDate',
            sorter: (a, b) => a.invoiceDate.localeCompare(b.invoiceDate),
            sortDirections: ['descend', 'ascend'],
            render:(text,record) => {
                return(
                    <>{record.invoiceDate ? moment(record.invoiceDate).format('YYYY-MM-DD') : '-'}</>
                )
            }
        },
        {
            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: 'Bill to Type',
            dataIndex: 'billToType',
            // render: (text, record) => {
            //   return record.billToType ? Number(record.billToType) : '-';
            // }
          },
          {
            title: 'Name',
            dataIndex: 'financierName', 
            // render: (text, record) => {
            //     return record.financierName ? Number(record.financierName) : '-';
            // }
          },
          
        {
            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>
                )
            }
        }

    ]

    const displayPrint = (data: RMInvoicePrintReq) => {
        setSelectedRMInvoicePrint(data);
        setIsModalVisible(true);
      };

    const detailViewHandler = (rowData) => {
        // console.log(rowData,"rowDatarowDatarowDatarowDatarowDatarowData")
        // setItemsInfo(rowData.grnItemInfo)
        getInvItemsInfo(rowData.invoiceNumber)
        // console.log(rowData.grnItemInfo,"rowData.grnItemInforowData.grnItemInforowData.grnItemInforowData.grnItemInfo")
    }

    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:'defectName',
            render:(text,record) => {
                return(
                    <>
                    {record.defectName ? record.defectName : '-'}
                    </>
                )
            }
        },
        {
            title:'Count',
            dataIndex:'count'
        },
        {
            title:'Quantity',
            dataIndex:'quantity'
        },
        {
            title:'Price',
            dataIndex:'price'
        },
        {
            title:'Actual Price',
            dataIndex:'approvedPrice',
            render:(text,record) => {
                return(
                    <>
                    {record.approvedPrice ? Number(record.approvedPrice) : '-'}
                    </>
                )
            }
        },
        {
            title:'Total Amount',
            dataIndex:'totalAmount',
            render:(text,record) => {
                return(
                    <>
                    {record.totalAmount ? Number(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.UNDER_APPROVAL)
        getGrnNumbers(InvoiceStatusEnum.UNDER_APPROVAL)
        getIndentNumbers(InvoiceStatusEnum.UNDER_APPROVAL)
    }

    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} dataSource={grnInfo}/>) : (<> <Result status="warning" title="No Data Found"/></>)}
                </TabPane>
                <TabPane key={InvoiceStatusEnum.APPROVED} tab='Accpeted'>
                { grnInfo.length > 0 ? (<Table columns={columns} 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 RMInvoiceView