import { EnquiryLifecycleStatusEnum, getAllEnquiryInfoReq } from '@gtpl/shared-models/enquiry-management';
import { Button, Card, Col, Form, Modal, Row, Select, Table, Tabs, Tooltip, message } from 'antd'
import { ColumnProps } from 'antd/lib/table';
import React, { useEffect, useState } from 'react'
import moment from "moment";
import { CostingService } from "libs/shared-services/enquiry-management/src/lib/costing-service"
import { EyeOutlined, SearchOutlined, UndoOutlined } from '@ant-design/icons';
import InquiryDetailedView from '../inquiry-detailed-view';
import form from 'antd/lib/form';



const QuotationInfoGrid = () => {
    const { TabPane } = Tabs;
    const [form] = Form.useForm()
    const {Option} = Select
    const [page, setPage] = useState<number>(1)
    const [ mainData, setMainData ] = useState<any[]>([])
    const costingService = new CostingService()
    const [tabName, setTabName] = useState<string>('QUOTATION SENT')
    const [data, setData] = useState<any[]>([])
    const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
    const [enqId, setEnqId] = useState<number>(0);
    const [enquiryNumbers,setEnquiryNumbers] = useState<any[]>([])
    const [enqDes, setEnqDes] = useState<any[]>([])
    const [enqUnit, setEnqUnit] = useState<any[]>([])

    useEffect(()=>{
        getAllQuotations(tabName)
        getEnquiryNumbers(tabName)
        getEnquiryDestinations(tabName)
        getEnquiryUnits(tabName)
    },[])

    const getEnquiryNumbers = (value) => {
        const req = new getAllEnquiryInfoReq(value,undefined,undefined,undefined,undefined,undefined)
        costingService.getEnquiryNo(req).then(res => {
            if(res.status){
                setEnquiryNumbers(res.data)
            }
        })
    }

    const getEnquiryDestinations = (value) => {
        const req = new getAllEnquiryInfoReq(value,undefined,undefined,undefined,undefined,undefined)
        costingService.getEnquiryDestinations(req).then(res => {
            if(res.status){
                setEnqDes(res.data)
            }
        })
    }

    const getEnquiryUnits = (value) => {
        const req = new getAllEnquiryInfoReq(value,undefined,undefined,undefined,undefined,undefined)
        costingService.getEnquiryUnits(req).then(res => {
            if(res.status){
                setEnqUnit(res.data)
            }
        })
    }

    const getAllQuotations = (value) =>{
        const req = new getAllEnquiryInfoReq(value,undefined,undefined,undefined,undefined,undefined)
        if(form.getFieldValue('enquiryNumber') != undefined){
            req.enquiryNo=form.getFieldValue('enquiryNumber')
        }
        costingService.getQuotationSentEnquiries(req).then((res)=>{
            if(res.status){
                setMainData(res.data)
                message.success(res.internalMessage,2)
            }else{
                setMainData([])
                message.error(res.internalMessage,2)
            }
        })
    }

    const tabsOnchange = (value) =>{
        console.log(value)
        setTabName(value)
        getAllQuotations(value)
        getEnquiryNumbers(value)
    }
    const getDetailedView = (rowData) =>{
        console.log(rowData,"1111")
        setData(rowData)
        setIsModalVisible(true)
        setEnqId(rowData?.enquiryId)
    }

    
    const handleCancel =() =>{
        setIsModalVisible(false)
    }

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

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


    const columns:ColumnProps<any>[] =[
        {
            title: 'S No',
            key: 'sno',
            width: '70px',
            responsive: ['sm'],
            render: (text, object, index) => (page - 1) * 10 + (index + 1)
        },
        {
            title:'Enquiry Number',
            dataIndex:'enquiryNumber',
            render:(text,record) => {
                return(
                    <>
                    {record.enquiryNumber ? record.enquiryNumber : '-'}
                    </>
                )
            }
        },
        {
            title:'Country',
            dataIndex:'countryName',
            render:(text,record) => {
                return(
                    <>
                    {record.countryName ? record.countryName : '-'}
                    </>
                )
            }
        },
        {
            title:'Destination',
            dataIndex:'destination',
            render:(text,record) => {
                return(
                    <>
                    {record.destination ? record.destination : '-'}
                    </>
                )
            }
        },
        {
            title:'Unit',
            dataIndex:'unitName',
            render:(text,record) => {
                return(
                    <>
                    {record.unitName ? record.unitName : '-'}
                    </>
                )
            }
        },
        {
            title:'Source From',
            dataIndex:'sourceFrom',
            render:(text,record) => {
                return(
                    <>
                    {record.sourceFrom ? record.sourceFrom : '-'}
                    </>
                )
            }
        },
        {
            title:'Agent',
            dataIndex:'agent',
            render:(text,record) => {
                return(
                    <>
                    {record.agent ? record.agent : '-'}
                    </>
                )
            }
        },
        {
            title:'Buyer',
            dataIndex:'buyer',
            render:(text,record) => {
                return(
                    <>
                    {record.buyer ? record.buyer : '-'}
                    </>
                )
            }
        },
        {
            title:'ETD',
            dataIndex:'etd',
            render:(text,record)=> {
                return(
                    <>
                    {record.etd ? moment(record.etd).format('YYYY-MM-DD') : '-'}
                    </>
                )
            }
        },
        {
            title:'Aging',
            dataIndex:'aging',
            align:'left',
            render:(text,record)=> {
                return(
                    <>
                    {record.aging ? record.aging : '-'}
                    </>
                )
            }
        },
        {
            title:'Enquiry Date',
            dataIndex:'enquiryDate',
            align:'left',
            render:(text,record)=> {
                return(
                    <>
                     {record.enquiryDate? moment(record.enquiryDate).format('YYYY-MM-DD') : '-'}
                    </>
                )
            }
        },
        {
            title:'Action',
            render:(text, rowData) =>{
                return (
                <>
                    <Tooltip title={'Detailed View'}>
                        <EyeOutlined onClick={() =>{getDetailedView(rowData)}}/>
                    </Tooltip>
                    </>
                )
            }

        }
    ]

    
  return (
    <Card title={<span style={{color:'white'}}>Quotations Info</span>} style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 ,display:'flex',height:'40px',alignItems:'center',justifyContent:'center'}}>
        <Form form={form} layout="vertical" onFinish={onFinish}>
        <Row gutter={24}>
                <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
                    <Form.Item name='enquiryNumber' label='Enquiry Number'>
                        <Select showSearch allowClear optionFilterProp="children" placeholder='Select Enquiry Number'>
                            {
                                enquiryNumbers.map(e => {
                                    return(
                                        <Option key={e.enquiryNo} value={e.enquiryNo}>{e.enquiryNo}</Option>
                                    )
                                })
                            }
                        </Select>

                    </Form.Item>
                </Col>
                <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
                    <Form.Item name='destination' label='Destination'>
                    <Select showSearch allowClear optionFilterProp="children" placeholder='Select Destination'>
                            {
                                enqDes.map(e => {
                                    return(
                                        <Option key={e.destinationId} value={e.destinationId}>{e.destination}</Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>
                </Col>
                <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
                    <Form.Item name='unit' label='Unit'>
                    <Select showSearch allowClear optionFilterProp="children" placeholder='Select Unit'>
                            {
                                enqUnit.map(e => {
                                    return(
                                        <Option key={e.unitId} value={e.unitId}>{e.unitName}</Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>
                </Col>
                <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 2 }} style={{marginTop:'30px'}}>
                    <Form.Item>
                        <Button icon={<SearchOutlined/>} 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:'30px'}}>
                    <Form.Item>
                        <Button icon={<UndoOutlined/>} danger onClick={onReset}>Reset</Button>
                    </Form.Item>
                </Col>
                </Row>
        </Form>
    <Tabs onChange={tabsOnchange} style={{marginTop:'-15px'}}>
            <TabPane key={EnquiryLifecycleStatusEnum.QUOTATION_SENT} tab={'PENDING'}>
            <Table 
              pagination={{
                onChange(current) {
                  setPage(current);
                }
              }}
              scroll = {{x:true}}
            columns={columns} 
            dataSource={mainData}
            size="small"
             ></Table>
            </TabPane>
            <TabPane key={EnquiryLifecycleStatusEnum.ACCEPTANCE_PENDING} tab={'CLOSED'}>
            <Table
             size="small"
             pagination={{
                onChange(current) {
                  setPage(current);
                }
              }}
             columns={columns}  
             dataSource={mainData}
             ></Table>
            </TabPane>
        </Tabs>
        <Modal
        className='detaile-view'
        width={'80%'}
        style={{ top: 30, alignContent: 'right' }}
        visible={isModalVisible}
        title={<React.Fragment>
        </React.Fragment>}
        onCancel={handleCancel}
        footer={[ ]}
       >
        <InquiryDetailedView rec={data} enquiryId={enqId}/>
      </Modal>
    </Card>
  )
}

export default QuotationInfoGrid