import { Button, Card, Col, DatePicker, Form, Row, Select, Table, Tabs } from "antd"
import { ColumnProps } from "antd/lib/table";
import React, { useEffect, useState } from "react"
import { SearchOutlined, UndoOutlined } from '@ant-design/icons';
import { EnquiryAssessmentInfoReq, EnquiryLifecycleStatusEnum } from "@gtpl/shared-models/enquiry-management";
import FormItem from "antd/lib/form/FormItem";
import { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import EnquiryAssessmentTable from "./enquiry-assessment-table";
import { EnquiriesService } from "libs/shared-services/enquiry-management/src/lib/enquiries-service";
import moment from "moment";
const { TabPane } = Tabs;
const {Option} = Select;
const {RangePicker}  = DatePicker

export const EnquiryAssessment = () => {
    const [form] = Form.useForm()
    const [page,setPage] = useState<number>(1)
    const [tabName,setTabName] = useState<EnquiryLifecycleStatusEnum>(EnquiryLifecycleStatusEnum.OPEN)
    const [enquiryInfo,setEnquiryInfo] = useState<any[]>([])
    const enquiryService = new EnquiriesService()
    const [enquiryNumbers,setEnquiryNumbers] = useState<any[]>([])
    const [countryInfo,setCountryInfo] = useState<any[]>([])
    const [destinationInfo,setDestinationInfo] = useState<any[]>([])
    const [unitInfo,setUnitInfo] = useState<any[]>([])
    const logInUser = JSON.parse(localStorage.getItem('role'))

    useEffect(() => {
        getEnquiryNumbers()
        getCountryInfo()
        getDestinationInfo()
        getUnitInfo()
        getEnquiryInfo(EnquiryLifecycleStatusEnum.OPEN)
    },[])

    const getEnquiryNumbers = () => {
        enquiryService.getEnquiryDropdownForEnquiryAssessment().then(res => {
            if(res.status){
                setEnquiryNumbers(res.data)
            }
        })
    }

    const getCountryInfo = () => {
        enquiryService.getCountryDropdown().then(res => {
            if(res.status){
                setCountryInfo(res.data)
            }
        })
    }

    const getDestinationInfo = () => {
        enquiryService.getDestinationDropdown().then(res => {
            if(res.status){
                setDestinationInfo(res.data)
            }
        })
    }

    const getUnitInfo = () => {
        enquiryService.getUnitDropdown().then(res => {
            if(res.status){
                setUnitInfo(res.data)
            }
        })
    }

    const getEnquiryInfo = (tabName) => {
        const req = new EnquiryAssessmentInfoReq(undefined,undefined,undefined,undefined,undefined,logInUser,undefined,undefined,'Assessment')
            req.status = tabName
        if(form.getFieldValue('enquiryNumber') != undefined){
            req.enquiryNumber = form.getFieldValue('enquiryNumber')
        }
        if(form.getFieldValue('country') != undefined){
            req.country =form.getFieldValue('country')
        }
        if(form.getFieldValue('destination') != undefined){
            req.destination = form.getFieldValue('destination')
        }
        if(form.getFieldValue('unit') != undefined){
            req.unit = form.getFieldValue('unit')
        }
        if(form.getFieldValue('enquiryDate') != undefined){
            req.fromDate = moment(form.getFieldValue('enquiryDate')[0]).format('YYYY-MM-DD')
            req.toDate = moment(form.getFieldValue('enquiryDate')[1]).format('YYYY-MM-DD')
        }
        enquiryService.getAllEnquiriesByStatus(req).then(res => {
            if(res.status){
                setEnquiryInfo(res.data)
                // AlertMessages.getSuccessMessage(res.internalMessage)
            } else{
                setEnquiryInfo([])
                AlertMessages.getErrorMessage(res.internalMessage)
            }
        })
    }
 
    const onTabChange = (val) => {
        setTabName(val)
        getEnquiryInfo(val)
    }

    const onSearch = (val) => {
        getEnquiryInfo(tabName)        
    }

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

    return(
        <Card title={<span style={{color:'white'}}>Enquiry Assessment</span>}
        style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 ,display:'flex',height:'40px',alignItems:'center',justifyContent:'center'}}>
            <Form form={form} layout="vertical" onFinish={onSearch}>
                <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.enquiryNumber} value={e.enquiryNumber}>{e.enquiryNumber}</Option>
                                    )
                                })
                            }
                        </Select>

                    </Form.Item>
                </Col>
                <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
                    <Form.Item name='country' label='Country'>
                    <Select showSearch allowClear optionFilterProp="children" placeholder='Select Country'>
                            {
                                countryInfo.map(e => {
                                    return(
                                        <Option key={e.countryId} value={e.countryId}>{e.countryName}</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'>
                            {
                                destinationInfo.map(e => {
                                    return(
                                        <Option key={e.destinationId} value={e.destinationId}>{e.destinationName}</Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>
                </Col>
                <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 3 }}>
                    <Form.Item name='unit' label='Unit'>
                    <Select showSearch allowClear optionFilterProp="children" placeholder='Select Unit'>
                            {
                                unitInfo.map(e => {
                                    return(
                                        <Option key={e.unitcodeId} value={e.unitcodeId}>{e.unitcodeName}</Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>
                </Col>
                <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 5 }}>
                    <Form.Item name='enquiryDate' label='Enquiry Date'>
                    <RangePicker style={{width:'100%'}}/>
                    </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={onTabChange} style={{marginTop:'-15px'}}>
                <TabPane key={EnquiryLifecycleStatusEnum.OPEN} tab='ENQUIRY ASSESSMENT'>
                    {/* <Table columns={columns} dataSource={data}size="large" bordered/> */}
                    <EnquiryAssessmentTable tabName={tabName} data={enquiryInfo}/>

                </TabPane>
                <TabPane key={EnquiryLifecycleStatusEnum.UNDER_ASSESMENT} tab='ASSESSMENT APPROVAL'>
                    {/* <Table columns={columns} dataSource={data} size="large" bordered/> */}
                    <EnquiryAssessmentTable tabName={tabName} data={enquiryInfo}/>

                </TabPane>
                <TabPane key={EnquiryLifecycleStatusEnum.ASSESMENT_APPROVED} tab='APPROVED ENQUIRIES'>
                    {/* <Table columns={columns} dataSource={data} size="large" bordered/> */}
                    <EnquiryAssessmentTable tabName={tabName} data = {enquiryInfo}/>
                </TabPane>
                
            </Tabs>
            
        </Card>
    )

}

export default EnquiryAssessment