import { ConfirmedContainersReq, ContainersReq, EnquiryIdreq } from "@gtpl/shared-models/enquiry-management"
import { AlertMessages } from "@gtpl/shared-utils/alert-messages"
import { Button, Card, Col, Form, Input, InputNumber, Row, Select } from "antd"
import Table, { ColumnProps } from "antd/lib/table"
import { CostingService } from "libs/shared-services/enquiry-management/src/lib/costing-service"
import { EnquiriesService } from "libs/shared-services/enquiry-management/src/lib/enquiries-service"
import React, { useEffect, useState } from "react"
import { useHistory } from "react-router-dom"

const {Option} = Select

export interface ContainerCapturingAgainstEnquiryProps{
    productsInfo: any
    productContainersInfo?: any
    containersAddHandler ?: (val) => void
    containersCount ?: number
    pageName?: string
    acceptButton?: boolean
    enquiryId?: number
    closeModal?:() => void
    costingApproval?:(val:boolean) => void
}

export const ContainerCapturingAgainstEnquiry = (props:ContainerCapturingAgainstEnquiryProps) => {
    // console.log(props,'=====propssss')
    const [page,setPage] = useState<number>(1)
    const enquiryService = new EnquiriesService()
    const [productData,setProductsData] = useState<any[]>([])
    const costingService = new CostingService()
    const logInUser = JSON.parse(localStorage.getItem('role'))
    let history = useHistory()
    const [addDisable,setAddDisable] = useState<boolean>(false)



    useEffect(()=> {
        if(props.productsInfo.length > 0){
            console.log(props.productsInfo)
            setProductsData(props.productsInfo)
        }      
    },[props.productsInfo])

    useEffect(() => {
        if(props.enquiryId && props.pageName == 'enquiryView'){
            const req  = new EnquiryIdreq(props.enquiryId)
            enquiryService.getLeadProductInfoModelByEnquiryId(req).then(res => {
                if(res.status){
                    setProductsData(res.data[0].productDetails)
                }
            })
        }

    },[props.enquiryId])

    const onGroupingChange = (e,index) => {
        setAddDisable(false)
        productData[index].grouping = Number(e.target.value)
        setProductsData([...productData])
    }

    const onContainersChange = (e,index) => {
        setAddDisable(false)
        productData[index].noOfContainers = Number(e.target.value)
        setProductsData([...productData])
    }

    const onConfirmedContainers = (e,index,record) => {
        // console.log('okkkkkkkkkkkkkkk')
         productData[index].confirmedContainers = Number(e.target.value)
         setProductsData([...productData])
        if(e.target.value > 0){
            if(Number(e.target.value) > record.noOfContainers){
                AlertMessages.getErrorMessage('Confirmed Containers should not be greater than No of conatiners')
                props.costingApproval(true)
            }else{
               
                props.costingApproval(false)

            }
        }else{
            AlertMessages.getErrorMessage('Please enter valid Confirmed Containers') 
                props.costingApproval(true)

        }
    }


    useEffect(() => {
        // console.log(props,'==========props')
        if(props.pageName == 'CostSheet' && props.acceptButton){
            // props.productContainersInfo(productData)
            // productData.map(e => {
            //     e.confirmedContainers = e.noOfContainers
            // })
            const findIndex = productData.findIndex(e => {
                return(
                    e.confirmedContainers != undefined && e.confirmedContainers != null
                )
            })
            console.log(findIndex)
            if(findIndex != -1){
                const conReq = []
                
            const grouped = {};
            // console.log(productData,'=========productdata')
            productData.forEach(item => {
            const group = item.grouping;
            if (!grouped[group]) {
                grouped[group] = [];
            }
            grouped[group].push(item);
            });
            const invalidGroups = [];

            for (const group in grouped) {
            const hasValidContainer = grouped[group].some(item => parseFloat(item.confirmedContainers) > 0);
            if (!hasValidContainer) {
                invalidGroups.push(parseInt(group));
            }
            }
            console.log(invalidGroups,'invalid')

            if(invalidGroups.length > 0){
                AlertMessages.getErrorMessage('Confirmed containers should be greater than zero')
            }else{
                
                productData.map(e => {
                    conReq.push(new ConfirmedContainersReq(e.productId,e.confirmedContainers ? e.confirmedContainers : 0))
                })
                const req = new ContainersReq(props.enquiryId,conReq,logInUser)
                costingService.updateConfirmedContainers(req).then(res => {
                    if(res.status){
                        AlertMessages.getSuccessMessage(res.internalMessage)
                        props.closeModal()
                    }else{
                        AlertMessages.getErrorMessage(res.internalMessage)
                    }
                })
            }
        }else{
            AlertMessages.getErrorMessage('Please Add Confirmed Containers')
        }


        }
    },[props.acceptButton])

    const columns : ColumnProps<any>[] = [
        {
            title: 'S No',
            key: 'sno',
            width: '70px',
            responsive: ['sm'],
            render: (text, object, index) => (page - 1) * 10 + (index + 1)
        },
        {
            title:'Category',
            dataIndex:'category'
        },
        {
            title:'Product',
            dataIndex:'shortCode'
        },
        {
            title:'Pack Count',
            dataIndex:'packCount'
        },
        {
            title:'Pack Style',
            dataIndex:'packStyleName'
        },
        {
            title:'Style Weightment',
            dataIndex:'styleWeighment'
        },
        {
            title:'Grouping',
            dataIndex:'grouping',
            render:(text,record,index) => {
                return(
                    <>
                    {props.pageName != 'enquiryForm' && record.grouping ? record.grouping : 
                    <Input onChange={(e) => onGroupingChange(e,index)} defaultValue={record.grouping ? record.grouping : ''} disabled={props.pageName == 'CostSheet' ? true : false} type='number'/>
                       }
                    </>
                )
            }
        },
        {
            title:'No.of Containers',
            dataIndex:'noOfContainers',
            render:(text,record,index) => {
                const findIndex = productData.findIndex(e => e.grouping == record.grouping)
                return(
                    <>
                    {props.pageName != 'enquiryForm' && record.noOfContainers ? record.noOfContainers : <Input min={0} onChange={(e) => onContainersChange(e,index)} defaultValue={record.noOfContainers ? record.noOfContainers : ''} disabled={(record.grouping > 0 && findIndex != index) || props.pageName == 'CostSheet' ? true : false} type='decimal'/>}
                    </>
                )
            }
        },
        props.pageName != 'enquiryForm' ? (
        {
            title:'Confirmed Containers',
            dataIndex:'confirmedContainers',
            render:(text,record,index) => {
                const findIndex = productData.findIndex(e => e.grouping == record.grouping)
                return(
                    <>
                    {props.pageName != 'enquiryForm' && props.pageName != 'CostSheet' && record.confirmedContainers ? record.confirmedContainers : <Input onChange={(e) => onConfirmedContainers(e,index,record)} disabled={record.grouping > 0 && findIndex != index ? true : false} defaultValue={record.noOfContainers} type='decimal'/>}
                    </>
                )
            }
        }
        ) : (<></>),
        props.pageName == 'enquiryView' ? ({
            title:'Action',
            dataIndex:'action',
            render:(text,record,index) => {
                const findIndex = productData.findIndex(e => e.grouping == record.grouping)
                return(
                    <>
                    {record.grouping > 0 && findIndex != index ? '' : <Button type='primary' onClick={() => onConfirmSO(record.grouping,record.confirmedContainers)} disabled={record.isSoCreated ? true: false}>Create SO</Button>}
                    </>
                )
            }
        }) : (<></>)
        

    ]

    const onConfirmSO = (grouping,confirmedContainers) => {
        history.push(`./saleorder-form/${props.enquiryId}/${grouping}/${confirmedContainers}`)
        // const req = new EnquiryIdreq(props.enquiryId,grouping)
        // enquiryService.

    }

    const onAdd = () => {
        console.log('okkk')
        const checkGrouping = productData.findIndex(e => {
            console.log(e.grouping)
            return (e.grouping == undefined)
        })
        // const checkContainers = productData.findIndex(e => {
        //     return (e.noOfContainers == 0 && e.grouping )
        // })
        // console.log(checkContainers,'===========')
        if(checkGrouping == -1){
            // if(checkContainers == -1){
                const conatinersMap = productData.map((product) => product.noOfContainers)
                const totalContainers = conatinersMap.reduce((acc, curr) => acc + (curr != undefined ? curr : 0))
                console.log(totalContainers)
                if(totalContainers == props.containersCount){
                    props.productContainersInfo({productDetails: productData})
                    props.containersAddHandler(true)
                    AlertMessages.getSuccessMessage('Containers added successfully')
                    setAddDisable(true)
                }else{
                    AlertMessages.getErrorMessage('Number of Containers should be equal as given above')
                }
            // }else{
            //     AlertMessages.getErrorMessage('No of containers should not be zero')
            // }
        }else{
            AlertMessages.getErrorMessage('Grouping must be given for all products')
        }
    }

    return(
        <Card title={<span style={{ color: 'white' }}>Containers Details</span>} style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}>
            <Table columns={columns} dataSource={productData} pagination={{pageSize:30}}/>
            {
                props.pageName == 'enquiryForm' ? (
                    <Row justify="end">
                        <Button onClick={onAdd} type="primary" disabled={addDisable}>Add</Button>
                    </Row>
                 ) : (<></>)
            }
            
            
        </Card>
    )

}

export default ContainerCapturingAgainstEnquiry