import { Button, Card, Col, Divider, Drawer, Form, Input, Modal, Row, Select, Tabs, Tooltip, message } from "antd"
import { EnquiriesService } from "libs/shared-services/enquiry-management/src/lib/enquiries-service"
import React, { useEffect, useRef, useState } from "react"
import { SearchOutlined, UndoOutlined, EditOutlined, EyeOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { EnquiryAssessmentInfoModel, EnquiryIdreq, EnquiryLifecycleStatusEnum, EnquirymanagementReq, getAllEnquiryInfoReq } from "@gtpl/shared-models/enquiry-management";
import Table, { ColumnProps } from "antd/lib/table";
import moment from "moment";
import { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import InquiryDetailedView from "./inquiry-detailed-view";
import { Link, Redirect, useHistory } from 'react-router-dom';
import InquiryForm from "./inquiry-form";
import ContainerCapturingAgainstEnquiry from "./containers-capturing-info";
import Highlighter from 'react-highlight-words';
import TextArea from "antd/lib/input/TextArea";


export function InquiryView (){

    const { TabPane } = Tabs;
    const [form] = Form.useForm()
    const [cancelForm] = Form.useForm()
    const {Option} = Select
    const [data, setData] = useState<any[]>([])
    const [enquirydata, setEnquirydata] = useState<any[]>([])
    const [enquiryNumbers,setEnquiryNumbers] = useState<any[]>([])
    const [countryInfo,setCountryInfo] = useState<any[]>([])
    const [destinationInfo,setDestinationInfo] = useState<any[]>([])
    const [unitInfo,setUnitInfo] = useState<any[]>([])
    const [page, setPage] = useState<number>(1)
    const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
    const [tabName, setTabName] = useState<string>('OPEN')
    const [drawerVisible, setDrawerVisible] = useState(false);
    const [enquiryId, setEnquiryId] = useState<number>(0)
    const [selecteddata, setSelectedData] = useState<any>([])
    const enquiryService = new EnquiriesService()
    const [enqId, setEnqId] = useState<number>(0);
    let history = useHistory()
    const [conatinersModalVisble,setContainersModalVisible] = useState<boolean>(false)
    const searchInput = useRef(null);
    const [searchText, setSearchText] = useState('');
    const [searchedColumn, setSearchedColumn] = useState('');
    const [isCancel,setIsCancel] = useState(false)
    const [cancelData, setCancelData] = useState<any[]>([])

    useEffect(() => {
        getEnquiryNumbers()
        getCountryInfo()
        getDestinationInfo()
        getUnitInfo()
        getAllEnquiryInfo(tabName)

    },[])
    
    const getEnquiryNumbers = () => {
        enquiryService.getEnquiryNumberDropdown().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 getAllEnquiryInfo = (value) =>{
        const req  = new getAllEnquiryInfoReq(value,undefined,undefined,undefined,undefined,undefined)
        if(form.getFieldValue('enquiryNumber') != undefined){
            req.enquiryNo=form.getFieldValue('enquiryNumber')
        }
        if(form.getFieldValue('country') != undefined){
            req.countryId =form.getFieldValue('country')
        }
        if(form.getFieldValue('destination') != undefined){
            req.destinationId = form.getFieldValue('destination')
        }
        if(form.getFieldValue('unit') != undefined){
            req.unitId = form.getFieldValue('unit')
        }
        enquiryService.getAllEnquiriesInfo(req).then(res=>{
            if(res.status){
                setEnquirydata(res.data)
            }else{
                message.error(res.internalMessage)
            }
        })
    }

    const cancelEnquiry = (data) =>{
        const req = new EnquiryAssessmentInfoModel(data.enquiryId,data.enquiryNumber,null,null,null,undefined,null,null,null,null,null)
        req.cancelReason = cancelForm.getFieldValue('cancelReason')
        enquiryService.cancelEnquiry(req).then((res)=>{
            if(res.status){
                cancelForm.resetFields()
                setIsCancel(false)
                message.success(res.internalMessage,2)
                getAllEnquiryInfo(tabName)
            }else{
                message.error(res.internalMessage,2)
            }
        })
    }

    const updateData = (data: EnquirymanagementReq) =>{
        console.log(data,'nameeeeeeeeeeeeeeeeeeeeeeeeeee')
        enquiryService.updateEnquiry(data).then((res)=>{
            if(res.status){
                message.success(res.internalMessage,2)
                getAllEnquiryInfo(null)
                setDrawerVisible(false)
            }else{
                message.error(res.internalMessage,2)
            }
        }).catch(err=>{
            message.error(err.message,2)
        })

    }


    const onReset = () =>{
        form.resetFields()
        getAllEnquiryInfo(tabName)
    }
    const getDetailedview = (rowData) =>{
        // console.log(rowData,"1111")
        setData(rowData)
        setIsModalVisible(true)
        setEnqId(rowData?.enquiryId)
    }

    const openFormWithData = (rowData) =>{
        setDrawerVisible(true)
        setSelectedData(rowData)
        setEnqId(rowData?.enquiryId)
    }

    function handleSearch(selectedKeys, confirm, dataIndex) {
        confirm();
        setSearchText(selectedKeys[0]);
        setSearchedColumn(dataIndex);
      };
    
      function handleReset(clearFilters) {
        clearFilters();
        setSearchText('');
      };
    
    
      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
      });
    
    
    

    const columns:ColumnProps<any>[] =[
        {
            title: 'S No',
            key: 'sno',
            width: '70px',
            responsive: ['sm'],
            fixed:'left',
            render: (text, object, index) => (page - 1) * 10 + (index + 1)
        },
        {
            title:'Enquiry Number',
            dataIndex:'enquiryNumber',
            fixed:'left',
            sorter: (a, b) => a.enquiryNumber?.localeCompare(b.enquiryNumber),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('enquiryNumber'),
            render:(text,record) => {
                return(
                    <>
                    {record.enquiryNumber ? record.enquiryNumber : '-'}
                    </>
                )
            },
        },
        {
            title:'Enquiry Date',
            dataIndex:'enquiryDate',
            sorter: (a, b) => a.enquiryDate?.localeCompare(b.enquiryDate),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('enquiryDate'),
            render:(text,record)=> {
                return(
                    <>
                    {record.enquiryDate ? moment(record.enquiryDate).format('YYYY-MM-DD') : '-'}
                    </>
                )
            },
        },
        {
            title:'Country',
            dataIndex:'countryName',
            sorter: (a, b) => a.countryName?.localeCompare(b.countryName),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('countryName'),
            render:(text,record) => {
                return(
                    <>
                    {record.countryName ? record.countryName : '-'}
                    </>
                )
            },
        },
        {
            title:'Destination',
            dataIndex:'destinationName',
            sorter: (a, b) => a.destinationName?.localeCompare(b.destinationName),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('destinationName'),
            render:(text,record) => {
                return(
                    <>
                    {record.destinationName ? record.destinationName : '-'}
                    </>
                )
            },
        },
        {
            title:'Unit',
            dataIndex:'unit',
            sorter: (a, b) => a.unitName?.localeCompare(b.unitName),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('unitName'),
            render:(text,record) => {
                return(
                    <>
                    {record.unitName ? record.unitName : '-'}
                    </>
                )
            },
        },
        {
            title:'Source From',
            dataIndex:'sourceFrom',
            sorter: (a, b) => a.sourceFrom?.localeCompare(b.sourceFrom),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('sourceFrom'),
            render:(text,record) => {
                return(
                    <>
                    {record.sourceFrom ? record.sourceFrom : '-'}
                    </>
                )
            },
        },
        {
            title:'Agent',
            dataIndex:'agentName',
            sorter: (a, b) => a.agentName?.localeCompare(b.agentName),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('agentName'),
            render:(text,record) => {
                return(
                    <>
                    {record.agentName ? record.agentName : '-'}
                    </>
                )
            },
        },
        {
            title:'Buyer',
            dataIndex:'buyerName',
            sorter: (a, b) => a.buyerName?.localeCompare(b.buyerName),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('buyerName'),
            render:(text,record) => {
                return(
                    <>
                    {record.buyerName ? record.buyerName : '-'}
                    </>
                )
            },
        },
        // {
        //     title:'FOB Consideration',
        //     dataIndex:'isFOB',
        //     render:(text,record) => {
        //         return(
        //             <>
        //             {
        //                 record.isFOB ? 'YES' : 'NO'
        //             }
        //             </>
        //         )
        //     }
        // },
        {
            title:'ETD',
            dataIndex:'etd',
            sorter: (a, b) => a.etd?.localeCompare(b.etd),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('etd'),
            render:(text,record)=> {
                return(
                    <>
                    {record.etd ? moment(record.etd).format('YYYY-MM-DD') : '-'}
                    </>
                )
            },
        },
      
        {
            title:'Aging',
            dataIndex:'aging',
            align:'left',
            sorter: (a, b) => a.aging?.localeCompare(b.aging),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('aging'),
            render:(text,record)=> {
                return(
                    <>
                    {record.aging ? record.aging : '-'}
                    </>
                )
            },
        },
        {
            title:'Aging Of LifeCycle Status Update',
            dataIndex:'aging',
            align:'left',
            render:(text,record)=> {
                return(
                    <>
                    {'-'}
                    </>
                )
            },
            // sorter: (a, b) => a.aging?.localeCompare(b.aging),
            // sortDirections: ['descend', 'ascend'],
            // ...getColumnSearchProps('aging'),
        },
        tabName !== EnquiryLifecycleStatusEnum.CANCELLED?{
            title:'LifeCycle Status',
            dataIndex:'lifeCycleStatus',
            align:'left',
            // fixed:'left',
            sorter: (a, b) => a.lifeCycleStatus?.localeCompare(b.lifeCycleStatus),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('lifeCycleStatus'),
            render:(text,record)=> {
                return(
                    <>
                     {record.lifeCycleStatus ? record.lifeCycleStatus : '-'}
                    </>
                )
            },


        }:{},
         tabName == EnquiryLifecycleStatusEnum.CANCELLED?{
            title:'Reason for Cancelled',
            dataIndex:'cancelReason',
            
            render:(text,record)=> {
                return(
                    <>
                     {record.cancelReason ? record.cancelReason : '-'}
                    </>
                )
            },


        }:{},
        {
            title:'Action',
            fixed:'right',
            render:(text, rowData) =>{
                return (
                <>
                {tabName !== EnquiryLifecycleStatusEnum.CANCELLED && (
                    <>
                        {rowData.lifeCycleStatus !== EnquiryLifecycleStatusEnum.CLOSED && (
                            <>
                                <Tooltip title="Edit">
                                    <EditOutlined
                                        className={'editSamplTypeIcon'}
                                        type="edit"
                                        onClick={() => {
                                            openFormWithData(rowData);
                                        }}
                                        style={{ color: '#1890ff', fontSize: '14px' }}
                                    />
                                </Tooltip>
                                <Divider type="vertical" />
                            </>
                        )}
                        <Tooltip title="Cancel">
                            {rowData?.lifeCycleStatus !== EnquiryLifecycleStatusEnum.CANCELLED ? (
                                <CloseCircleOutlined
                                    onClick={() => enquiryCancel(rowData)}
                                    style={{ color: 'red', fontSize: '14px' }}
                                />
                            ) : (
                                <CloseCircleOutlined
                                    style={{ color: 'gray', fontSize: '14px' }}
                                    disabled
                                />
                            )}
                        </Tooltip>
                        <Divider type="vertical" />
                    </>
                )}
                    <Tooltip title={'Detailed View'}>
                        <EyeOutlined onClick={() =>{getDetailedview(rowData)}}/>
                    </Tooltip>
                    {
                        rowData?.lifeCycleStatus == EnquiryLifecycleStatusEnum.ACCEPTED ? (<>
                        <Divider type="vertical"/>
                        <Button onClick={() => onCreateSO(rowData)}>Create SO</Button>
                        </>) : (<></>)
                    }
                    </>
                )
            }

        }
    ]
    const filteredColumns = columns.filter((column) => Object.keys(column).length > 0);

    const onCreateSO = (rowData) => {
        // history.push(`./saleorder-form/${rowData.enquiryId}`)
        setEnquiryId(rowData.enquiryId)
        setContainersModalVisible(true)
    }


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

    const tabsOnchange = (value) =>{
    // console.log(value)
    setTabName(value)
    getAllEnquiryInfo(value)
    }

    const onFinish = () =>{
        getAllEnquiryInfo(tabName)
    }
    const closeDrawer=()=>{
        setDrawerVisible(false);
      }
    //   console.log(enqId,'000000000000000000000000000000')
    
    const closeContainerModal = () => {
        
    }

    const enquiryCancel = (data) =>{
        setIsCancel(true)
        setCancelData(data)
    }
return(
    <Card title={<span style={{color:'white'}}>Enquiry Management</span>}
    style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} extra={<Link to='/inquiry-management-form' ><span style={{color:'white'}} ><Button className='panel_button' >Create </Button> </span></Link>} >
        <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.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: 4 }}>
                    <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: 2 }} style={{marginTop:'2%'}}>
                    <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:'2%'}}>
                    <Form.Item>
                        <Button icon={<UndoOutlined/>} danger onClick={onReset}>Reset</Button>
                    </Form.Item>
                </Col>
                </Row>
        </Form>
        <Tabs onChange={tabsOnchange}>
            <TabPane key={EnquiryLifecycleStatusEnum.OPEN} tab={'OPEN/IN PROGRESS'}>
            <Table 
              pagination={{
                onChange(current) {
                  setPage(current);
                }
              }}
              scroll = {{x:'max-content'}}
            columns={filteredColumns} 
            dataSource={enquirydata}
            size="small"
             ></Table>
            </TabPane>
            <TabPane key={EnquiryLifecycleStatusEnum.CLOSED} tab={'CLOSED'}>
            <Table
             size="small"
             pagination={{
                onChange(current) {
                  setPage(current);
                }
              }}
              scroll = {{x:'max-content'}}
             columns={filteredColumns}  dataSource={enquirydata}></Table>
            </TabPane>
            <TabPane key={EnquiryLifecycleStatusEnum.CANCELLED} tab={'CANCELLED'}>
            <Table
             size="small"
             pagination={{
                onChange(current) {
                  setPage(current);
                }
              }}
              scroll = {{x:'max-content'}}
             columns={filteredColumns}  dataSource={enquirydata}></Table>
            </TabPane>
        </Tabs>
        <Drawer bodyStyle={{ paddingBottom: 80 }} title='Update' width={window.innerWidth > 768 ? '90%' : '85%'}
              onClose={closeDrawer} visible={drawerVisible} closable={true}>
                 <Card headStyle={{ textAlign: 'center', fontWeight: 500, fontSize: 16 }} size='small'>
                <InquiryForm key={Date.now()}
                  enquiryData={selecteddata}
                  isUpdate={true}
                  closeForm={closeDrawer}
                  enquiryId={enqId}
                  updateEnquiryData={updateData}
                  />
              </Card>
              </Drawer>
        <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>
      <Modal visible={conatinersModalVisble} width={'90%'} title={'Containers Info'} onCancel={() => setContainersModalVisible(false)} footer={[]}>
        <ContainerCapturingAgainstEnquiry productsInfo={[]} pageName="enquiryView" enquiryId={enquiryId} closeModal={closeContainerModal}/>
      </Modal>
      <Modal visible={isCancel} title={'Enquiry Cancel Info'} onCancel={() => setIsCancel(false)}  width={'50%'} footer={false}>
        {/* <Card> */}
            <Form form={cancelForm} layout="inline" onFinish={()=>cancelEnquiry(cancelData)}>
                <Row gutter={[24,24]}>
                <Col span={18} 
                >
                <Form.Item name='cancelReason' label='Reason' rules={[{required:true,message:'Missing Reason for canceling'}]} 
                >
                <TextArea autoSize />
                </Form.Item>
                </Col>
                 <Col span={6}>
                    <Form.Item>
                        <Button  type='primary' htmlType="submit" >Submit</Button>
                    </Form.Item>
                </Col>
                </Row>
            </Form>
        {/* </Card> */}
      </Modal>
    </Card>
)
}
export default InquiryView