import { PostShipmentCreateDto } from '@gtpl/shared-models/common-models';
import { ContainerRegisterService } from '@gtpl/shared-services/logistics';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Card, Col, DatePicker, Form, Input, Row, Checkbox, message, Button } from 'antd';
import moment from 'moment';
import React, { useState, useEffect } from 'react';
import { Link, useHistory, useLocation } from 'react-router-dom';

export interface PostShipmentProps { 
    saleOrderId: number;
    updateData: PostShipmentCreateDto;
    updateVessel:any
}

const PostShipmentForm = (props: PostShipmentProps) => {
    const [vesselDetails,setVesselDetails]=useState<any>()
    const containerRegisterService = new ContainerRegisterService;
    const [saleOrderId, setSaleOrderId] = useState<number | undefined>(undefined);
    const [isLcChecked, setIsLcChecked] = useState(false);
    const service = new ContainerRegisterService();
    const [form] = Form.useForm();
    const location = useLocation();
    const stateData: any = location.state;
    console.log(stateData,"stateDataaa")
    let history = useHistory();
    const saleOrderIdFromLocation = stateData?.saleOrderId || props?.saleOrderId;
    console.log(saleOrderId,"saleOrderIddd")
    const updateState: PostShipmentCreateDto = stateData?.updateState || props?.updateData;
    const updateVessel:any=stateData?.updateVessel || props?.updateVessel
    const vesselNo = updateState?.vesselNo || updateVessel?.vesselNo || '';
    const vesselName = updateState?.vesselName || updateVessel?.vesselName || '';
    useEffect(() => {
        if (updateState) {
            console.log('stateeeee');
            
            form.setFieldsValue({
                saleOrderId: updateState.saleOrderId,
                vesselNo:updateState.vesselNo,
                vesselName:updateState.vesselName,
                marksNo: updateState.marksNo,
                dateOfIssue: updateState.dateOfIssue ? moment(updateState.dateOfIssue) : undefined,
                lcNo: updateState.lcNo,
                lcName: updateState.lcName,
                lcBankAddress: updateState.lcBankAddress,
                lcAmount: updateState.lcAmount,
            });
        }
        else {
            console.log('vessellllllllllllll');
            
            form.setFieldsValue({
                vesselNo:updateVessel?.[0]?.vesselNo,
                vesselName: updateVessel?.[0]?.vesselName,
            });
        }
    }, [updateState, form,updateVessel,vesselDetails]);

    useEffect(() => {
        setSaleOrderId(saleOrderIdFromLocation);
    
        if (saleOrderIdFromLocation) {
            VesselDetailsForPostShipment(saleOrderIdFromLocation);
        }
    }, [saleOrderIdFromLocation, form]); 
    
    const onFinish = () => {
        const req = new PostShipmentCreateDto();
        req.vesselNo = form.getFieldValue('vesselNo');
        req.vesselName = form.getFieldValue('vesselName');
        req.marksNo = form.getFieldValue('marksNo');
        req.dateOfIssue = form.getFieldValue('dateOfIssue');
        req.lcNo = form.getFieldValue('lcNo');
        req.lcName = form.getFieldValue('lcName');
        req.lcBankAddress = form.getFieldValue('lcBankAddress');
        req.lcAmount = form.getFieldValue('lcAmount');
        req.saleOrderId = saleOrderId;
        service.createPostShipmentDetails(req).then(res => {
            if (res.status) {
                AlertMessages.getSuccessMessage(res.internalMessage);
                setTimeout(() => {
                    message.success('Submitted successfully');
                    history.push("/bl-status-grid");
                    // window.location.reload();
                }, 500);
            } else {
                AlertMessages.getErrorMessage(res.message);
            }
        }).catch(err => {
            AlertMessages.getErrorMessage(err.message);
        });
    };

    const clearData = () => {
        form.resetFields();
    };

    const handleLcChange = (e) => {
        setIsLcChecked(e.target.checked);
    };
    const VesselDetailsForPostShipment = (req?: number) => {
        if (!req) return;
        setSaleOrderId(req);
        containerRegisterService.getVesselDetailsForPostShipment({ saleOrderId: req }).then((res) => {
            if (res.status) {
                setVesselDetails(res.data);
                const poNumber = res.data?.[0]?.poNumber;
                const invoiceNumber = res.data?.[0]?.invoiceNumber
                if (form) {
                    form.setFieldsValue({
                        poNumber,
                        invoiceNumber,
                    });
                } else {
                    console.error('Form is not available!');
                }
            } else {
                setVesselDetails(undefined);
            }
        }).catch((error) => {
            console.error('Error fetching vessel details:', error);
        });
    };
    
    
    return (
        <div>
            <Card title={<span style={{ color: 'white' }}>Post Shipment</span>}
                style={{ textAlign: 'center' }}
                headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
                extra={
                    <Link to="/bl-status-grid">
                        <Button className="panel_button">View</Button>
                    </Link>
                }>
                <Form form={form} onFinish={onFinish} layout="vertical">
                    <Row gutter={24}>
                        <Col span={6} hidden>
                            <Form.Item name="saleOrderId" label="SO Number" hidden>
                                <Input type="hidden" />
                            </Form.Item>
                        </Col>
                        <Col span={4}>
                            <Form.Item label="Vessel No" name="vesselNo"
                        //      rules={[
                        //       {
                        //           pattern: /^[0-9]*$/, // Regular expression to match only numbers
                        //           message: 'Please enter numbers only.',
                        //       },
                        //   ]}
                        
                          >
                                <Input placeholder="Enter Vessel No" />
                            </Form.Item>
                        </Col>
                        <Col span={4}>
                            <Form.Item label="Vessel Name" name="vesselName">
                                <Input placeholder="Enter Vessel Name" />
                            </Form.Item>
                        </Col>
                        <Col span={4}>
                         <Form.Item label="PO Number" name="poNumber">
                         <Input disabled />
                         </Form.Item>
                         </Col>
                         <Col span={4}>
                        <Form.Item label="Invoice Number" name="invoiceNumber">
                        <Input disabled />
                        </Form.Item>
                        </Col>

                        {/* <Col span={6}>
                            <Form.Item label="Marks No" name="marksNo" >
                                <Input placeholder="Enter Marks No" />
                            </Form.Item>
                        </Col> */}
                        <Col span={4}>
                            <Form.Item label="LC Date Of Issue" name="dateOfIssue">
                                <DatePicker style={{ width: "100%" }}/>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={6}>
                            <Form.Item name="isLc" valuePropName="checked">
                                <Checkbox onChange={handleLcChange}>Is LC?</Checkbox>
                            </Form.Item>
                        </Col>
                    </Row>
                    {isLcChecked && (
                        <Row gutter={24}>
                            <Col span={6}>
                                <Form.Item label="LC No" name="lcNo">
                                    <Input placeholder="Enter LC No" />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="LC Name" name="lcName">
                                    <Input placeholder="Enter LC Name" />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="LC Bank Address" name="lcBankAddress">
                                    <Input placeholder="Enter LC Bank Address" />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="LC Amount" name="lcAmount"
                                 rules={[
                                  {
                                      pattern: /^[0-9]*$/, // Regular expression to match only numbers
                                      message: 'Please enter numbers only.',
                                  },
                              ]}>
                                    <Input placeholder="Enter LC Amount" />
                                </Form.Item>
                            </Col>
                        </Row>
                    )}
                    <Row>
                        <Col span={24} style={{ textAlign: 'right' }}>
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                            <Button htmlType="button" style={{ margin: '0 14px' }} onClick={clearData}>
                                Reset
                            </Button>
                        </Col>
                    </Row>
                </Form>
            </Card>
        </div>
    );
};

export default PostShipmentForm;