import { EnquiryAssessmentInfoReq, EnquiryAssessmentUpdateReq, EnquiryLifecycleStatusEnum, SourceFromEnum } from "@gtpl/shared-models/enquiry-management"
import { AlertMessages } from "@gtpl/shared-utils/alert-messages"
import { Button, Col, Divider, Form, Input, Modal, Row, Select, Table, Tooltip } from "antd"
import { ColumnProps } from "antd/lib/table"
import { EnquiriesService } from "libs/shared-services/enquiry-management/src/lib/enquiries-service"
import moment from "moment"
import React, { useEffect, useState } from "react"
import {useHistory} from "react-router-dom"
import InquiryDetailedView from "./inquiry-detailed-view"
import { ReasonsService } from "@gtpl/shared-services/masters"
import { ReasonCategoryDto } from "@gtpl/shared-models/masters"
import { ReasonCategoryEnum } from "@gtpl/shared-models/common-models"
import { EyeOutlined, CheckSquareOutlined, CheckOutlined,CloseOutlined } from '@ant-design/icons';

const { TextArea } = Input;
const {Option} = Select


export interface EnquiryAssessmentTableProps{
    tabName: EnquiryLifecycleStatusEnum,
    // searchValues ?: EnquiryAssessmentInfoReq\
    data:any

}

export const EnquiryAssessmentTable = (props: EnquiryAssessmentTableProps) => {
    const [page,setPage] = useState<number>(1)
    const [enquiryInfo,setEnquiryInfo] = useState<any[]>([])
    const enquiryService = new EnquiriesService()
    const [rejectModal,setRejectModal] = useState<boolean>(false)
    const [record,setRecord] = useState<any>()
    const [index,setIndex] = useState<number>()
    const [rejectForm] = Form.useForm()
    let history = useHistory();
    const [detailViewModalOpen,setDetailViewModalOpen] = useState<boolean>(false)
    const [enquiryId,setEnquiryId] = useState<number>()
    const [rejectreasons,setRejectReasons] = useState<any[]>([])
    const reasonService = new ReasonsService()
    const [rejectReasonName,setRejectReasonName] = useState<string>('')
    const logInUser = JSON.parse(localStorage.getItem('role'))
    const [pageSize, setPageSize] = useState<number>(1);

    useEffect(() => {
        if(props?.data){
            setEnquiryInfo(props.data)
        }

    },[props?.data])

    const getRejectReasons = () => {
        const req = new ReasonCategoryDto(ReasonCategoryEnum.ENQUIRY_REJECT_REASON)
        reasonService.getReasonsAgainstCategory(req).then(res => {
            if(res.status){
                setRejectReasons(res.data)
            }
        })
    }

    const updateAssessmentStatus = (record,index,status,rejectReason,rejectDescription) => {
                const req = new EnquiryAssessmentUpdateReq(record.enquiryId,status,rejectReason,logInUser,rejectReasonName,rejectDescription)
        enquiryService.updateEnquiryAssesmentStatus(req).then(res => {
            if(res.status){
                AlertMessages.getSuccessMessage(res.internalMessage)
                enquiryInfo.splice(index,1)
                setEnquiryInfo([...enquiryInfo])
                rejectForm.resetFields()
            }else{
                AlertMessages.getErrorMessage(res.internalMessage)
            }
        })
    }

    const onStartAssessment = (record,index) => {
        updateAssessmentStatus(record,index,EnquiryLifecycleStatusEnum.UNDER_ASSESMENT,null,null)
    }

    const onApprove = (record,index) => {
        updateAssessmentStatus(record,index,EnquiryLifecycleStatusEnum.ASSESMENT_APPROVED,null,null)
    }

    const onReject = (record,index) => {
        getRejectReasons()
        setRecord(record)
        setIndex(index)
        setRejectModal(true)
    }

    const onRejectReasonModalOk = () => {
        if(rejectForm.getFieldValue('rejectReason')  != undefined) {
            setRejectModal(false)
            updateAssessmentStatus(record,index,EnquiryLifecycleStatusEnum.ASSESMENT_REJECTED,rejectForm.getFieldValue('rejectReason'),rejectForm.getFieldValue('rejectDescription'))
        } else{
            AlertMessages.getErrorMessage('Reject Reason is mandatory!')
        }
    }

    // const soCreationHandler = (record) => {
    //     console.log(record,'========================')
    //     // history.push(`/saleorder-form/${record.enquiryId}`)
    //     history.push(`/saleorder-form`,{state:{id: record.enquiryId}})

    // }

    const onRejectModalClose = () => {
        rejectForm.resetFields()
        setRejectModal(false)
    }

    const onMoreInfo = (record) => {
        setEnquiryId(record.enquiryId)
        setDetailViewModalOpen(true)
    }

    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:'country',
            render:(text,record) => {
                return(
                    <>
                    {record.country ? record.country : '-'}
                    </>
                )
            }
        },
        {
            title:'Destination',
            dataIndex:'destination',
            render:(text,record) => {
                return(
                    <>
                    {record.destination ? record.destination : '-'}
                    </>
                )
            }
        },
        {
            title:'Unit',
            dataIndex:'unit',
            render:(text,record) => {
                return(
                    <>
                    {record.unit ? record.unit : '-'}
                    </>
                )
            }
        },
        {
            title:'Source From',
            dataIndex:'sourceFrom',
            render:(text,record) => {
                return(
                    <>
                    {record.sourceFrom ? record.sourceFrom : '-'}
                    </>
                )
            },
            filters: [
                {
                  text: `${SourceFromEnum.BUYER}`,
                  value: SourceFromEnum.BUYER,
                },
                {
                  text: `${SourceFromEnum.AGENT}`,
                  value: SourceFromEnum.AGENT,
                },
                {
                    text: `${SourceFromEnum.EMPLOYEE}`,
                    value: SourceFromEnum.EMPLOYEE,
                  },
              ],
              filterMultiple: false,
              onFilter: (value, record) => 
              {
                // === is not work
                return record.sourceFrom === value;
              },
        },
        {
            title:'Agent',
            dataIndex:'agent',
            sorter: (a, b) =>  a.agent?.localeCompare(b.agent),//alphanumeric sorting
             sortDirections: ['descend', 'ascend'],
            render:(text,record) => {
                return(
                    <>
                    {record.agent ? record.agent : '-'}
                    </>
                )
            }
        },
        {
            title:'Buyer',
            dataIndex:'buyer',
            sorter: (a, b) =>  a.buyer?.localeCompare(b.buyer),//alphanumeric sorting
             sortDirections: ['descend', 'ascend'],
            render:(text,record) => {
                return(
                    <>
                    {record.buyer ? record.buyer : '-'}
                    </>
                )
            }
        },
        {
            title:'Enqiury Date',
            dataIndex: 'enquiryDate',
            render:(text,record) => {
                return(
                    <>
                    {record.enquiryDate ? moment(record.enquiryDate).format('YYYY-MM-DD') : '-'}
                    </>
                )
            }
        },
        {
            title:'ETD',
            dataIndex:'deliveryDate',
            render:(text,record)=> {
                return(
                    <>
                    {record.deliveryDate ? moment(record.deliveryDate).format('YYYY-MM-DD') : '-'}
                    </>
                )
            }
        },
        {
            title:'Action',
            dataIndex:'action',
            render:(text,record,index)=>{
                return(
                    <>
                        <Tooltip placement="top" title='Detail View'>
                        <EyeOutlined onClick={() => onMoreInfo(record)} style={{color:'#69c0ff'}}/>
                        </Tooltip>
                    {props.tabName == EnquiryLifecycleStatusEnum.OPEN ? (<><Divider type="vertical"/>
                    <Tooltip placement="top" title='Start Assessment'>
                        <CheckSquareOutlined onClick={() => onStartAssessment(record,(page - 1) * 10 + (index))} style={{color:'green'}}/>
                    </Tooltip>
                    </>) : (<></>)}
                    {props.tabName == EnquiryLifecycleStatusEnum.UNDER_ASSESMENT ? (<>
                        <Divider type="vertical"/>
                        <Tooltip placement="top" title='Approve'>
                        <CheckOutlined onClick={() => onApprove(record,index)} style={{color:'darkgreen'}}/>
                        </Tooltip>
                        <Divider type="vertical"/>
                    <Tooltip placement="top" title='Reject'>
                    <CloseOutlined onClick={() => onReject(record,index)} style={{color:'red'}}/>
                    </Tooltip>
                    </>) : (<></>)}
                    </>
                )
            }
        },
        // props.tabName == EnquiryLifecycleStatusEnum.OPEN ? ({
        //     title:'Action',
        // dataIndex:'action2',
        // render:(text,record,index)=>{
        //     return(
        //         <Button onClick={() => onStartAssessment(record,index)}>Start Assessment</Button>
        //     )
        // }}):({}),
        // props.tabName == EnquiryLifecycleStatusEnum.UNDER_ASSESMENT ? ({ title:'Action',
        //     dataIndex:'action3',
        //     render:(text,record,index)=>{
        //         return(
        //             <>
        //             <Button onClick={() => onApprove(record,index)}>Approve Enquiry</Button>
        //             <Button onClick={() => onReject(record,index)}>Reject Enquiry</Button>
        //             </>

        //         )
        // }}): ({}),
        // props.tabName == EnquiryLifecycleStatusEnum.ASSESMENT_APPROVED ? ({
        //     title:'Action',
        // dataIndex:'action4',
        // render:(text,record)=>{
        //     return(
        //         <Button onClick={() => soCreationHandler(record)}>Create SO</Button>
        //     )
        // }}):({}),
    ]

    const onRejectReasonChange = (key,obj) => {
        setRejectReasonName(obj?.reasonName)
    }
    
    return(
        <>
        {enquiryInfo.length > 0 ? (<Table columns={columns} dataSource={enquiryInfo} size="small" bordered 
        pagination={{
            pageSize: 50,
            onChange(current,pageSize) {
              setPage(current);
              setPageSize(pageSize);
            }
          }}
          scroll={{x:true}}
          />) : (<></>)}
        
        <Modal key={1} width={'60%'} visible={rejectModal} title={'Reject Reason'} onCancel={onRejectModalClose} footer={[<Button onClick={onRejectReasonModalOk}>Submit</Button>]}>
            <Form form={rejectForm}>
                <Row gutter={24}>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 12 }}>
                        <Form.Item name='rejectReason' label='Reject Reason' rules={[{required:true,message:'Reject Reason is mandatory'}]}>
                            {/* <TextArea rows={4}/> */}
                            <Select showSearch allowClear placeholder="Select Reject Reason" onChange={onRejectReasonChange}>
                                {rejectreasons.map(e => {
                                    return(
                                        <Option key={e.reasonId} value={e.reasonId} reasonName={e.reasonName}>{e.reasonName} </Option>
                                    )
                                })}
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={24}>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 12 }}>
                        <Form.Item name='rejectDescription' label='Reject Description' rules={[{required:true,message:'Reject Description is mandatory'}]}>
                            <TextArea rows={4}/>
                           
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            
        </Modal>
        <Modal key={2} className='detaile-view'
        width={'80%'}
        style={{ top: 30, alignContent: 'right' }}
        visible={detailViewModalOpen}
        title={<React.Fragment>
        </React.Fragment>}
        onCancel={() => setDetailViewModalOpen(false)}
        footer={[ ]}>
            <InquiryDetailedView rec={[]} enquiryId={enquiryId}/>

        </Modal>
        </>
        
    )

}

export default EnquiryAssessmentTable