import { AdjustmentNoteCategoryEnum } from "@gtpl/shared-models/common-models"
import { AdjutsmentNoteCategoryReq } from "@gtpl/shared-models/finance"
import { AdjustmentNoteService } from "@gtpl/shared-services/finance"
import { Button, Card, Col, Form, Input, Modal, Row, Select, Table, Tabs } from "antd"
import { ColumnProps } from "antd/lib/table"
import React, { useEffect, useRef, useState } from "react"
import { useHistory } from "react-router-dom"
import Highlighter from 'react-highlight-words';
import {SearchOutlined } from '@ant-design/icons';
import DebitCreditPrint from "./debit-credit-print"

const {Option} = Select
export const AdjustmentNoteView = () => {
    const [page,setPage] = useState<number>(1)
    const { TabPane } = Tabs;
    const service = new AdjustmentNoteService()
    const [data,setData] = useState<any[]>([])
    const [tabName,setTabName] = useState<any>(AdjustmentNoteCategoryEnum.DEBIT)
    const [form] = Form.useForm()
    const [notenumbers,setNoteNumbers] = useState<any[]>([])
    const [invoiceNumbers,setInvoiceNumbers] = useState<any[]>([])
    const [showTable,setShowTable] = useState<boolean>(false)
    const history = useHistory()
    const [pageSize, setPageSize] = useState<number>(1);
    const [vendorsInfo,setVendorsInfo] = useState<any[]>([])
    const searchInput = useRef(null);
    const [searchText, setSearchText] = useState(''); 
    const [searchedColumn, setSearchedColumn] = useState('');
      const [slectedDebitData, setSelectedDebitData] = useState<any>(undefined);
    const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
    const [drawerVisible, setDrawerVisible] = useState(false);
    const [tab, setTab] = useState('');

  
    useEffect(() => {
      getNoteNumberDropDown()
      getInvoiceNumberDropDown()
      getVendorsDropdown()
    },[tabName])

    useEffect(() => {
      getAdjustmentNoteInfo(AdjustmentNoteCategoryEnum.DEBIT)
    },[])

    const getNoteNumberDropDown = () => {
      const req = new AdjutsmentNoteCategoryReq(tabName,null,null)
      service.getNoteNumberDropDown(req).then(res => {
        if(res.status){
          setNoteNumbers(res.data)
        }
      })
    }

    const getInvoiceNumberDropDown = () => {
      const req = new AdjutsmentNoteCategoryReq(tabName,null,null)
      service.getInvoiceNumberDropDown(req).then(res => {
        if(res.status){
          setInvoiceNumbers(res.data)
        }
      })
    }

    const getVendorsDropdown = () => {
      const req = new AdjutsmentNoteCategoryReq(tabName,null,null)
      service.getVendorDropDown(req).then(res => {
        if(res.status){
          setVendorsInfo(res.data)
        }
      })
    }


    const getAdjustmentNoteInfo = (val) => {
      const req = new AdjutsmentNoteCategoryReq(val,null,null)
      if(form.getFieldValue('noteNumber') != undefined){
        req.noteNumber = form.getFieldValue('noteNumber')
      }
      if(form.getFieldValue('invoiceNumber') != undefined){
        req.invoiceNumber = form.getFieldValue('invoiceNumber')
      }
      if(form.getFieldValue('vendor') != undefined){
        req.vendorId = form.getFieldValue('vendor')
      }
      service.getAdjustmentNoteInfo(req).then(res => {
        if(res.status){
          setData(res.data)
          setShowTable(true)
        }else{
          setData([])
        }
      })
    }

    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
       
    });

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

    const displayModel = (data: any,tabName) => {
      setSelectedDebitData(data);
      setTab(tabName)
      setIsModalVisible(true);
      setIsModalVisible(true);
    };
    const closeDrawer=()=>{
      setDrawerVisible(false);
    }
    const handleCancel = () => {
      getAdjustmentNoteInfo(tabName);
      setIsModalVisible(false);
    };
    const columns : ColumnProps<any>[] = [
        {
            title: 'S No',
            key: 'sno',
            width: '70px',
            responsive: ['sm'],
            render: (text, object, index) => (page - 1) * 10 + (index + 1)
        },
        {
          title:`${tabName == AdjustmentNoteCategoryEnum.DEBIT ? 'Debit' : 'Credit'} Note Number`,
          dataIndex:'noteNum',
          render:(text,record) => {
            return(
              <>
              {record.category == AdjustmentNoteCategoryEnum.DEBIT ? record.debitNoteNum : record.creditNoteNum}
              </>
            )
          }
        },
        {
          title:'Invoice Number',
          dataIndex:'invoiceNum'
        },
        {
          title:'Po Number',
          dataIndex:'poNumber',
          // sorter: (a, b) =>  a.poNumber?.localeCompare(b.poNumber),//alphanumeric sorting
          // sortDirections: ['descend', 'ascend'],
          ...getColumnSearchProps('poNumber')
        },
        {
          title:'Vendor',
          dataIndex:'vendorName',
          sorter: (a, b) =>  a.vendorName?.localeCompare(b.vendorName),//alphanumeric sorting
          sortDirections: ['descend', 'ascend'],
        },
        {
          title:'Action',
          render: (rowData) => (
            <span>
              {tabName == AdjustmentNoteCategoryEnum.DEBIT?(<>
              {rowData.debitNoteNum !== null && rowData.debitNoteNum !== undefined ? (
                <Button
                  type="primary"
                  shape="round"
                  size="small"
                  onClick={() => {
                    displayModel(rowData.debitNoteNum,tabName);
                  }}
                >
                  Print
                </Button>
              ):('-')}
              </>):(<>{rowData.creditNoteNum !== null && rowData.creditNoteNum !== undefined ? (
                <Button
                  type="primary"
                  shape="round"
                  size="small"
                  onClick={() => {
                    displayModel(rowData.creditNoteNum,tabName);
                  }}
                >
                  Print
                </Button>
              ):('-')}</>)}
            </span>
          )
        }
      
      ]

    const onTabChange = (val) => {
      let category
      if(val == 1){
        category = AdjustmentNoteCategoryEnum.DEBIT
      }else{
        category = AdjustmentNoteCategoryEnum.CREDIT
      }
      setTabName(category)
      getAdjustmentNoteInfo(category)
    }

    const itemColumns : ColumnProps<any>[]  = [
      {
        title: 'S No',
        key: 'sno',
        width: '70px',
        responsive: ['sm'],
        render: (text, object, index) => (page - 1) * 10 + (index + 1)
      },
      {
        title:'Item',
        dataIndex:'itemName'
      },
      {
        title:'Sale Order Number',
        dataIndex:'saleOrderNum',
        render:(text,record) => {
          return(
            <>
            {record.saleOrderNum ? record.saleOrderNum : 'N/A'}
            </>
          )
        }
      },
      {
        title:'GRN Number',
        dataIndex:'grnNum',
      },
      {
        title:'Price',
        dataIndex:'price'
      },
      {
        title:'Quantity',
        dataIndex:'quantity',
        render:(text,record) => {
          return(
            <>
            {record.quantity ? Number(record.quantity) : '-'}
            </>
          )
        }
      },
      {
        title:'Tax Percent',
        dataIndex:'taxPer'
      },
      {
        title:'Tax Amount',
        dataIndex:'taxAmount'
      },
      {
        title:'Total Amount',
        dataIndex:'totalAmount'
      },
    ]

    const renderItems = (record: any, index, indent, expanded) => {
      console.log(record);
      return (
      <Card bordered={false}>
        <Table columns={itemColumns} dataSource={record.itemsInfo} pagination={false}/>
      </Card>
      )
    }

    const onFinish = () => {
      getAdjustmentNoteInfo(tabName)
    }

    const onReset = () => {
      form.resetFields()
      getAdjustmentNoteInfo(tabName)
    }

    return (
        <Card title={<span style={{color:'white'}}>Debit/Credit Note View</span>}
        style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} extra={<Button onClick={() => {history.push('/grn-adjustment-note')}}>Create</Button>}>
          <Form form={form} onFinish={onFinish} layout="vertical">
            <Row gutter={24}>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 6 }}>
              <Form.Item name='vendor' label={'Vendor'}>
                <Select allowClear showSearch optionFilterProp="children" placeholder='Select Vendor'>
                  {
                    vendorsInfo.map(e => {
                      return(
                        <Option key={e.vendorId} value={e.vendorId}>{e.vendorName}</Option>
                      )
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 6 }}>
              <Form.Item name='noteNumber' label={`${tabName == AdjustmentNoteCategoryEnum.CREDIT ? 'Credit' : 'Debit'} Note Number` }>
                <Select allowClear showSearch optionFilterProp="children" placeholder='Select Note Number'>
                  {
                    notenumbers.map(e => {
                      return(
                        <Option key={tabName == AdjustmentNoteCategoryEnum.CREDIT ? e.creditNoteNumber : e.debitNoteNumber} value={tabName == AdjustmentNoteCategoryEnum.CREDIT ? e.creditNoteNumber : e.debitNoteNumber}>{tabName == AdjustmentNoteCategoryEnum.CREDIT ? e.creditNoteNumber : e.debitNoteNumber}</Option>
                      )
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 6 }}>
              <Form.Item name='invoiceNumber' label='Invoice Number'>
                <Select allowClear showSearch optionFilterProp="children" placeholder='Select Invoice Number'>
                  {
                    invoiceNumbers.map(e => {
                      return(
                        <Option key={e.invoiceNumber} value={e.invoiceNumber}>{e.invoiceNumber}</Option>

                      )
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 2 }} style={{marginTop:'2%'}}>
              <Form.Item label={null}>
                <Button type='primary' htmlType="submit">Search</Button>
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 2 }} style={{marginTop:'2%'}}>
              <Form.Item label={null}>
                <Button danger onClick={onReset}>Reset</Button>
              </Form.Item>
            </Col>
            </Row>
          </Form>
          <Tabs onChange={onTabChange}>
            <TabPane key={1} tab='DEBIT NOTE'>
              {
                showTable ? (<Table rowKey={record => record.adjutsmentNoteId} columns={columns} dataSource={data} expandedRowRender={renderItems} 
                   pagination={{
                  onChange(current,pageSize) {
                    setPage(current);
                    setPageSize(pageSize);
                  }
                }}
                />) : (<></>)
                
              }
                
            </TabPane>
            <TabPane key={2} tab='CREDIT NOTE'>
            {
                showTable ? (<Table rowKey={record => record.adjutsmentNoteId} columns={columns} dataSource={data} expandedRowRender={renderItems} pagination={{
                  onChange(current,pageSize) {
                    setPage(current);
                    setPageSize(pageSize);
                  }
                }}/>) : (<></>)
                
              }
            </TabPane>
          </Tabs>
          <Modal
        className='inspection'
        key={'modal' + Date.now()}
        width={'80%'}
        style={{ top: 30, alignContent: 'right' }}
        visible={isModalVisible}
        title={<React.Fragment>
        </React.Fragment>}
        onCancel={handleCancel}
        footer={[

        ]}
      >
              <DebitCreditPrint key={Date.now()}                
                data={slectedDebitData} tab={tab} />
            </Modal>
        </Card>
    )
  
  }
  

export default AdjustmentNoteView