import React, { useEffect, useState } from 'react';
import {Button, Card, Col, Divider, Form, Input, Modal, Row, Select} from 'antd'
import {UndoOutlined, SearchOutlined} from '@ant-design/icons'
import {GrnService} from '@gtpl/shared-services/procurement'
import Table, { ColumnProps } from 'antd/lib/table';
import { AdjustmentNoteService } from 'libs/shared-services/finance/src/lib/adjustment-note-service';
import { GrnIdRequest } from 'libs/shared-models/procurement-management/src/lib/grn';
import { AdjustmentNoteCategoryEnum } from 'libs/shared-models/common-models/src/lib/enum';
import { AdjustmentNoteItemsInfo, AdjustmentNoteReq } from 'libs/shared-models/finance/src/lib/adjustment-note-req';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import {useHistory} from 'react-router-dom'

const {Option} = Select

/* eslint-disable-next-line */
// export interface AdjustmentNoteProps {}

export const AdjustmentNote = () => {
  const [page,setPage] = useState<number>(1)
  const grnServcie = new GrnService()
  const [grnNumbers,setGrnNumbers] = useState<any[]>([])
  const [form] = Form.useForm()
  const [grnInfo,setGrnInfo] = useState<any[]>([])
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [selectedRows, setSelectedRows] = useState<any[]>([]);
  const [modalVisible,setModalVisible] = useState<boolean>(false)
  const [modalForm] = Form.useForm()
  const [data,setData] = useState<any[]>([])
  const adjustmentNoteService = new AdjustmentNoteService()
  const [debitDisable,setDebitDisable] = useState<boolean>(false)
  const [creditDisable,setCreditDisable] = useState<boolean>(false)
  const history = useHistory()
  const [pageSize, setPageSize] = useState<number>(1);

  useEffect(() => {
    getGrnNumbers()
  },[])

  const getGrnNumbers = () => {
    grnServcie.getInspectedGRNNumbersDropdown().then(res => {
      if(res.status){
        setGrnNumbers(res.data)
      }
    })
  }

  const onQuantityChange = (e,record) => {
    const index = data.findIndex(e => {
      return(
        e.grnItemId == record.grnItemId
      )
    })
    if(index == -1){
      const req = new AdjustmentNoteItemsInfo(record.vendorId,record.invoiceNumber,record.poId,record.itemId,null,e.target.value,null,null,record.grnItemId,record.grnId,record.vendorCode,record.taxPer)
      setData([...data,req])
    }else{
      data[index].quantity = Number(e.target.value)
      let taxAmount = ((Number(e.target.value)*Number(data[index].price))* record.taxPer) / 100
      data[index].taxAmount = taxAmount
      data[index].totalAmount = (Number(e.target.value) * Number(data[index].price)) + taxAmount
    }
  }

  const onPriceChange = (e,record) => {
    const index = data.findIndex(e => {
      return(
        e.grnItemId == record.grnItemId
      )
    })
    if(index == -1){
      const req = new AdjustmentNoteItemsInfo(record.vendorId,record.invoiceNumber,record.poId,record.itemId,e.target.value,null,null,null,record.grnItemId,record.grnId,record.vendorCode,record.taxPer)
      setData([...data,req])
    }else{
      data[index].price = e.target.value
      let taxAmount = ((Number(e.target.value)*Number(data[index].quantity))* record.taxPer) / 100
      data[index].taxAmount = taxAmount
      data[index].totalAmount = (Number(e.target.value) * (Number(data[index].quantity))) + taxAmount
    }
  }

  const columns : ColumnProps<any>[] = [
    {
        title: 'S No',
        key: 'sno',
        width: '70px',
        responsive: ['sm'],
        render: (text, object, index) => (page - 1) * 10 + (index + 1)
    },
    {
      title:'Invoice Number',
      dataIndex:'invoiceNumber'
    },
    {
      title:'Item',
      dataIndex:'itemName'
    },
    {
      title:'Sale Order Number',
      dataIndex:'saleOrderNumber',
      render:(text,record) => {
        return(
          <>
          {record.saleOrderNumber ? record.saleOrderNumber : 'N/A'}
          </>
        )
      }
    },
    {
      title:'Po Number',
      dataIndex:'poNumber'
    },
    {
      title:'Po Quantity',
      dataIndex:'poQty'
    },
    {
      title:'Received Quantity',
      dataIndex:'recievedQty',
      render:(text,record) => {
        return(
          <>
          {record.recievedQty ? Number(record.recievedQty) : '-'}
          </>
        )
      }
    },
    {
      title:'Unit Price',
      dataIndex:'price'
    },
    {
      title:'Total Amount',
      dataIndex:'totalAmount'
    },
    {
      title:'Quantity',
      dataIndex:'quantity',
      render:(text,record) => {
        return(
          <>
          {<Input onChange={(e) => onQuantityChange(e,record)}/>}
          </>
        )
      }
    },
    {
      title:'Price',
      dataIndex:'price',
      render:(text,record) => {
        return(
          <>
          {<Input onChange={(e) => onPriceChange(e,record)}/>}
          </>
        )
      }
    },
    // {
    //   title:'Action',
    //   dataIndex:'aciton',
    //   render:(text,record) => {
    //     return(
    //       <>
    //       <Button>Debit</Button>
    //       <Divider type='vertical'/>
    //       <Button>Credit</Button>
    //       </>
    //     )
    //   }
    // },
  ]

  const onGrnNumberSearch = (val) => {
    const req = new GrnIdRequest(val.grnId)
    grnServcie.getInspectedGrnInfo(req).then(res => {
      if(res.status){
        setGrnInfo(res.data)
      }else{
        setGrnInfo([])
      }
    })
  }

  // const onSelectChange = (newSelectedRowKeys: React.Key[], selectedRows) => {
  //   setSelectedRows(selectedRows)
  //   setSelectedRowKeys(newSelectedRowKeys);
  // }

  // const rowSelection = {
  //   selectedRowKeys: selectedRowKeys,
  //   onChange: onSelectChange,
  // };

  const createAdjustmentNote = (category) => {
    const req = new AdjustmentNoteReq(category,data)
    adjustmentNoteService.createAdjustmentNote(req).then(res => {
      if(res.status){
        AlertMessages.getSuccessMessage(res.internalMessage)
        setCreditDisable(false)
        setDebitDisable(false)
        form.resetFields()
        setGrnInfo([])
      }else{
        AlertMessages.getErrorMessage(res.internalMessage)
      }
    })
  }

  const onDebit = () => {
    setCreditDisable(true)
  createAdjustmentNote(AdjustmentNoteCategoryEnum.DEBIT)
  }

  const onCredit = () => {
    setDebitDisable(true)
  createAdjustmentNote(AdjustmentNoteCategoryEnum.CREDIT)

  }

  const onReset = () => {
    form.resetFields()
    setGrnInfo([])
  }

  return (
    <Card size="small" title={<span style={{ color: 'white' }} >Debit/Credit Note</span>}
    style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }} extra={<Button onClick={() => {history.push('/adjustment-note-view')}}>View</Button>}>
      <Form form={form} onFinish={onGrnNumberSearch}>
      <Row gutter={24}>
        <Col xs={{span:24}} sm={{span:24}} md={{span:3}} lg={{span:3}} xl={{span:6}}>
        <Form.Item name='grnId' label='GRN Number'>
          <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:3}} lg={{span:3}} xl={{span:3}} >
        <Form.Item>
          <Button type='primary' htmlType='submit' icon={<SearchOutlined/>}>Search</Button>
        </Form.Item>
        </Col>
        <Col xs={{span:24}} sm={{span:24}} md={{span:3}} lg={{span:3}} xl={{span:3}} >
        <Form.Item>
          <Button danger icon={<UndoOutlined/>} onClick={onReset}>Reset</Button>
        </Form.Item>
        </Col>
      </Row>
      </Form>
      {
        grnInfo.length > 0 ? (<>
        <Row justify='end'>
        <Button style={{marginRight:'2%'}} onClick={onDebit} disabled={debitDisable}>Debit</Button>
        <Button onClick={onCredit} disabled={creditDisable}>Credit</Button>
        </Row>
        <br/>
          <Table columns={columns} dataSource={grnInfo} rowKey={record => record.grnItemId} pagination={{
                onChange(current,pageSize) {
                  setPage(current);
                  setPageSize(pageSize);
                }
              }}/>
        </>) : (<></>)
      }
      {/* <Modal visible={modalVisible} onCancel={() => setModalVisible(false)}  width={'80%'} style={{ top: 30, alignContent: 'right' }} title={<React.Fragment></React.Fragment>}>
        <Form form={modalForm}>
        <Row gutter={24}>
        <Col xs={{span:24}} sm={{span:24}} md={{span:3}} lg={{span:3}} xl={{span:4}}>
          <Form.Item name='quantity' label='Quantity'>
            <Input placeholder='Enter quantity'/>
          </Form.Item>
          </Col>
          <Col xs={{span:24}} sm={{span:24}} md={{span:3}} lg={{span:3}} xl={{span:4}}>
          <Form.Item name='price' label='Price'>
            <Input placeholder='Enter Price'/>
          </Form.Item>
          </Col>
        </Row>
        </Form>
      </Modal> */}
    </Card>
  );
}

export default AdjustmentNote;