import { EnquiryAssessmentInfoReq, EnquiryLifecycleStatusEnum, FreezeUnFreezeInfoReq, SourceFromEnum } from "@gtpl/shared-models/enquiry-management";
import { Button, Card, Col, Divider, Form, Popconfirm, Row, Select, Tabs, Tooltip } from "antd"
import Table, { 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 { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import { EyeOutlined, SearchOutlined, UndoOutlined } from '@ant-design/icons';
import { useHistory } from "react-router-dom";
import EnquiryCostSheetGeneration from "./cost-sheet-generation";
import {RightSquareOutlined} from '@ant-design/icons'

const { TabPane } = Tabs;
const {Option} = Select;

export const FreezeUnFreezeInfo = () => {
    const [page,setPage] = useState<number>(1)
    const logInUser = JSON.parse(localStorage.getItem('role'))
    const enquiryService = new EnquiriesService()
    const [enquiryInfo,setEnquiryInfo] = useState<any[]>([])
    const [enquiryNumberInfo,setEnquiryNumbersInfo] = useState<any[]>([])
    const [tabName,setTabName] = useState<string>()
    const [form] = Form.useForm()
    let history =  useHistory()

    useEffect(() => {
        getEnquiryNumbers('UnFreezed')
        getEnquiryInfo('UnFreezed')
    },[])

    const getEnquiryNumbers = (val) => {
        const req = new FreezeUnFreezeInfoReq(val)
        enquiryService.getFreezeUnFreezeEnquiryNumberDropdown(req).then(res => {
            if(res.status){
                setEnquiryNumbersInfo(res.data)
            }
        })
    }


    const getEnquiryInfo = (tabName) => {
        const req = new EnquiryAssessmentInfoReq(undefined,undefined,undefined,undefined,undefined,logInUser,undefined,undefined,tabName)
        if(form.getFieldValue('enquiryNumber') != undefined){
            req.enquiryNumber = form.getFieldValue('enquiryNumber')
        }
        enquiryService.getAllEnquiriesByStatus(req).then(res => {
            if(res.status){
                setEnquiryInfo(res.data)
                // AlertMessages.getSuccessMessage(res.internalMessage)
            } else{
                setEnquiryInfo([])
                AlertMessages.getErrorMessage(res.internalMessage)
            }
        })
    }

    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:'Status',
            dataIndex:'lifeCycleStatus',
        },
        {
            title:'Action',
            dataIndex:'action',
            render:(text,record) => {
                return(
                    <>
                    {tabName == 'Freezed' ? (<>
                    <Tooltip title='View'>
                        <EyeOutlined onClick={() => costsheetRedirect(record.enquiryId,'view')} className={'editSamplTypeIcon'} style={{ color: '#1890ff', fontSize: '14px' }}/>
                    </Tooltip>
                    </>) : (<>
                    {record.lifeCycleStatus == EnquiryLifecycleStatusEnum.ASSESMENT_APPROVED || record.lifeCycleStatus == EnquiryLifecycleStatusEnum.RENEGOTIATED ? (<>
                        {/* <Button onClick={() => costsheetRedirect(record.enquiryId,'generate')}>Generate</Button> */}
                        <Tooltip title='Generate'>
                           <RightSquareOutlined onClick={() => costsheetRedirect(record.enquiryId,'generate')} className={'editSamplTypeIcon'} style={{ color: '#1890ff', fontSize: '14px' }}/>
                        </Tooltip>
                    </>) : (<>
                    <Tooltip title='View'>
                    <EyeOutlined onClick={() => costsheetRedirect(record.enquiryId,'generate')} className={'editSamplTypeIcon'} style={{ color: '#1890ff', fontSize: '14px' }}/>
                    </Tooltip>
                    <Divider type='vertical'/>
                    <Popconfirm title='Are you sure to Regenerate?' onConfirm={() => costsheetRedirect(record.enquiryId,'regenerate')}>
                        {/* <Button >Regenerate</Button> */}
                        <Tooltip title='ReGenerate'>
                           <UndoOutlined className={'editSamplTypeIcon'} style={{ color: '#1890ff', fontSize: '14px' }}/>
                        </Tooltip>
                    </Popconfirm>
                    </>)}
                    
                    
                    </>)}
                    </>
                )
            }
        }
       
    ]

    const costsheetRedirect = (enquiryId,operation) => {
        history.push(`/enquiry-costsheet-generation/${enquiryId}/${operation}`)
        
    }

    const onTabChange = (val) => {
        setTabName(val)
        getEnquiryInfo(val)
        getEnquiryNumbers(val)
    }

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

    const onReset = () => {
        form.resetFields()
        getEnquiryInfo(tabName)
    }
    return(
        <Card title={<span style={{color:'white'}}>Cost Sheet Generation</span>} style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 ,display:'flex',height:'40px',alignItems:'center',justifyContent:'center'}}>
             <Form form={form} onFinish={onSearch} layout="vertical">
                <Row gutter={24}>
                <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 5 }}>
                    <Form.Item name='enquiryNumber' label='Enquiry Number'>
                        <Select showSearch allowClear optionFilterProp="children" placeholder='Select Enquiry Number'>
                            {
                                enquiryNumberInfo.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: 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={'UnFreezed'} tab='UnFreezed'>
                <Table columns={columns} dataSource={enquiryInfo} scroll={{x:true}}/>
            </TabPane>
            <TabPane key={'Freezed'} tab='Freezed'>
                <Table columns={columns} dataSource={enquiryInfo} scroll={{x:true}}/>
            </TabPane>
            </Tabs>
        </Card>
    )

}

export default FreezeUnFreezeInfo