import React, { useEffect, useState } from 'react';
import { Card, Button, Form, Row, Col, Select, Input, DatePicker, Upload, Typography, UploadProps, Radio, TimePicker, Descriptions } from 'antd';
import './container-register.css';
import { Redirect, useLocation, useHistory } from 'react-router-dom';
import { SaleOrderService } from '@gtpl/shared-services/sale-management';
import { ContainerRegisterService, DocumentsListService } from '@gtpl/shared-services/logistics';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { PortOfEntryCodes, SaleOrderDropDownDto } from '@gtpl/shared-models/sale-management';
import { ContainerStatusEnum, ContainerStatusInput, DocumentType } from '@gtpl/shared-models/common-models';
import moment from 'moment';
import { ContainerStatusInfo, DocumentsListRequest } from '@gtpl/shared-models/logistics';
import Link from 'antd/lib/typography/Link';
import { UploadOutlined, PlusOutlined } from '@ant-design/icons';
import { HrmsEmployeeDetailsDto } from '@gtpl/shared-models/masters';
import { FreightsCompanytService, HrmsEmpDetService } from '@gtpl/shared-services/masters';
import Table, { ColumnProps } from 'antd/lib/table';


/* eslint-disable-next-line */
export interface PostShippedDetailsProps { }
const { Option } = Select;
export function PostShippedDetails(
    props: PostShippedDetailsProps
) {

    let location = useLocation();
    const containerStatusInfo: ContainerStatusInfo | any = location.state;
    const [containerRegisterForm] = Form.useForm();
    const [isUpdate, setIsUpdate] = useState<boolean>(false);
    const [filelist, setfilelist] = useState([]);
    const [fieldsData, setFieldsData] = useState<DocumentsListRequest>(undefined);
    const [afterSubmitDisable, setAfterSubmitDisable] = useState<boolean>(false);
    const [saleOrderData, setSaleOrderData] = useState<any[]>([]);
    const [tab, setTab] = useState<string>(undefined);
    const [employeeData, setEmployeeData] = useState<HrmsEmployeeDetailsDto[]>([]);
    const format = 'HH:mm';

    const SoService = new SaleOrderService();
    const containerRService = new ContainerRegisterService();
    const employeeService = new HrmsEmpDetService();
    let portOfEntries = PortOfEntryCodes;
    const history = useHistory();
    const [lineData, setLineData] = useState<any[]>([]);
    const [linerId, setLinerId] = useState(null);
    const lineService = new FreightsCompanytService()

 
    

    useEffect(() => {
        getActiveLines()
        getSaleOrderData();
        getLogisticsPersonsData();

        if (containerStatusInfo) {

            containerRegisterForm.setFieldsValue({
                saleOrderId: containerStatusInfo.saleOrderId,
                containerStatus: ContainerStatusEnum.LOADED_AND_SEALED,
                containerId: containerStatusInfo.containerId,
                containerNo: containerStatusInfo.containerNo,
                saleOrderNumber: containerStatusInfo.saleOrderNumber,
                scac: containerStatusInfo.scac,
                shippingBillNo: containerStatusInfo.shippingBillNo,
                portCode:Number(containerStatusInfo.portCode),
                etd: containerStatusInfo.etd ? moment(containerStatusInfo.etd, 'YYYY-MM-DD') : null,
                eta: containerStatusInfo.eta ? moment(containerStatusInfo.eta, 'YYYY-MM-DD') : null,
                stuffingStartTime:containerStatusInfo.stuffingStartTime,
                stuffingCompletionTime:containerStatusInfo.stuffingCompletionTime,
                authorisedBy:containerStatusInfo.authorisedById,
                vesselName:containerStatusInfo.vesselName,
                vesselNumber:containerStatusInfo.vesselNumber,
                examinationDate:containerStatusInfo.examinationDate ? moment(containerStatusInfo.examinationDate,'YYYY-MM-DD'):null,
                shippingBillDate:containerStatusInfo.shipping_bill_date? moment(containerStatusInfo.shipping_bill_date,'YYYY-MM-DD'):null,
                branchCode:containerStatusInfo.branchCode,
                tempIndicatorNo1:containerStatusInfo.tempIndicatorNo1,
                tempIndicatorNo2:containerStatusInfo.tempIndicatorNo2,
                tempIndicatorNo3:containerStatusInfo.tempIndicatorNo3,
                shippingLiner:containerStatusInfo.shippingLiner, 
                blNo:containerStatusInfo.blNo



                
               

            });
            console.log(containerStatusInfo, 'saleOrderId')
        } else {
            containerRegisterForm.setFieldsValue({
                containerStatus: ContainerStatusEnum.LOADED_AND_SEALED
            });
        }
    }, [containerStatusInfo]);

    // get sale order drop down details
    const getSaleOrderData = () => {
        SoService.getSoPoBrandDropDownList().then((res) => {
            if (res.status) {
                setSaleOrderData(res.data);
            } else {
                if (res.intlCode) {
                    AlertMessages.getErrorMessage(res.internalMessage);
                } else {
                    AlertMessages.getErrorMessage(res.internalMessage);
                }
                setSaleOrderData([]);
            }
        }).catch((err) => {
            AlertMessages.getErrorMessage(err.message);
            setSaleOrderData([]);
        });
    }

    const getActiveLines = () => {
        lineService.getAllActiveFreightsCompanies().then((res) => {
            if (res.status) {
                setLineData(res.data)
            } else {
                setLineData([]);
            }
        })
    }

    const getLogisticsPersonsData = () => {
        employeeService.getAllActiveAuthorisedEmployees().then((res) => {
            if (res.status) {
                setEmployeeData(res.data);
            } else {
                // if (res.intlCode) {
                //   AlertMessages.getErrorMessage(res.internalMessage);
                // } else {
                //   AlertMessages.getErrorMessage(res.internalMessage);
                // }
                setEmployeeData([]);
            }
        }).catch((err) => {
            AlertMessages.getErrorMessage(err.message);
            setEmployeeData([]);
        });
    }

    const handleLinerChange = (value) => {
        setLinerId(value); 
      };

    const saveData = (values) => {
        values.createdUser = localStorage.getItem('createdUser');
        values.updatedUser = localStorage.getItem('createdUser');
        values.unitId = localStorage.getItem("unit_id");

        setAfterSubmitDisable(true);
        containerRService.postShipmentDetails(values).then(res => {
            if (!res.status) {
                AlertMessages.getErrorMessage(res.message);
            } else {
                // history.push('/container-register-grid');
                goToContainerGrid();
                AlertMessages.getSuccessMessage(res.internalMessage);
            }
            setAfterSubmitDisable(false);
        }).catch(err => {
            setAfterSubmitDisable(false);
            AlertMessages.getErrorMessage(err.message);
        })
    }

    const documentsListService = new DocumentsListService();


    const goToContainerGrid = () => {
        setTab("Loading");
    }


    return (
        <>
            {tab ? <Redirect to={{ pathname: "/container-register-grid", state: tab }} /> : null}

            <Card title={<span style={{ color: 'white' }}>Pre Shipment Details</span>}
                style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }} extra={<Link onClick={e => goToContainerGrid()} ><span style={{ color: 'white' }} ><Button className='panel_button' >View </Button> </span></Link>} >
                <Form layout="vertical" form={containerRegisterForm} name="control-hooks" 
                    onFinish={saveData} 
                >
                    <Row gutter={24}>
                        <Form.Item name="containerId">
                            <Input hidden />
                        </Form.Item>
                        <Form.Item name="scac">
                            <Input hidden />
                        </Form.Item>

                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 7 }}>
                            <Form.Item name="saleOrderId" label="SO Number" >
                                <Select
                                    placeholder="Select SaleOrder"
                                    allowClear
                                    disabled
                                >
                                    <Option value={''}>Please Select</Option>
                                    {saleOrderData.map(dropData => {
                                        return <Option value={dropData.saleOrderId}>{`${dropData.poNumber}-${dropData.brandName}-${dropData.variantCode}`}</Option>

                                        // return <Option value={dropData.saleOrderId}>{dropData.saleOrderNumber}</Option>
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 7 }} style={{marginTop:30}}>

                        <Descriptions>
              <Descriptions.Item label="Invoice Number">
                {containerStatusInfo.invoiceNumber
                }
              </Descriptions.Item>
            </Descriptions></Col>
            </Row>
            <Row gutter={24}>
                        {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >

                            <Form.Item label="Scroll No" name="scrollNo" rules={[{ required: true, message: 'Missing scroll No' }]}>
                            <Input/>
                            </Form.Item>

                        </Col>

                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
                            <Form.Item label="Scroll Date" name="ScrollDate" rules={[{ required: true, message: 'Scroll date' }]}>
                            <DatePicker
                                format={'DD-MM-YYYY'} style={{ width: '100%' }} />
                            </Form.Item>
                        </Col> */}
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
                            <Form.Item label="Port code" name="portCode" rules={[{ required: true, message: 'Please enter Port Code' }]}>
                            <Select
                showSearch
                optionFilterProp="children"
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                placeholder="Select Port Code"
                // onChange={destinationOnchange}
                allowClear
                // disabled={subPoDisable}
              >
                {portOfEntries.map(dropData => {
                  return <Option value={dropData.value}>{dropData.name}</Option>
                })}
              </Select>
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
                            <Form.Item label="Shipping Bill Date" name="shippingBillDate" rules={[{ required: true, message: 'Shipping Bill Date' }]}>
                                <DatePicker
                                    format={'DD-MM-YYYY'} style={{ width: '100%' }} />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >

                            <Form.Item label="Shipping Bill No" name="shippingBillNo" rules={[{ required: true, message: 'Missing Shipping Bill No' }]}>
                                <Input />
                            </Form.Item>

                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
                            <Form.Item label="Stuffing date" name="examinationDate" rules={[{ required: true, message: 'Stuffing date is Missing' }]}>
                                <DatePicker
                                    format={'DD-MM-YYYY'} style={{ width: '100%' }} />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
                            <Form.Item
                                label="Stuffing Start Time"
                                name="stuffingStartTime"
                                rules={[{ required: true, message: 'Enter Stuffing Start Time' }]}
                             
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 5 }}>
                            <Form.Item
                                label="Stuffing Completion Time"
                                name="stuffingCompletionTime"
                                rules={[{ required: true, message: 'Enter Stuffing Completion Time' }]}
                            >
                                <Input  />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 5 }}>
                            <Form.Item
                                label="Time Taken For Stuffing"
                                name="timeTakenForStuffing"
                                // rules={[{ required: true, message: 'Enter Time Taken For Stuffing' }]}
                            >
                                <Input defaultValue="2" disabled/>
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
                            <Form.Item
                                label="Branch Code"
                                name="branchCode"
                                rules={[{ required: true, message: 'Enter Branch Code' }]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 5 }}>
                            <Form.Item
                                label="Temperature Indicator No 1"
                                name="tempIndicatorNo1"
                                // rules={[{ required: true, message: 'Enter Temperature Indicator No 1' }]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                       
                       
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 5 }}>
                            <Form.Item
                                label="Temperature Indicator No 2"
                                name="tempIndicatorNo2"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 5 }}>
                            <Form.Item
                                label="Temperature Indicator No 3"
                                name="tempIndicatorNo3"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
                            <Form.Item
                                label="Vessel Name"
                                name="vesselName"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
                            <Form.Item
                                label="Vessel No"
                                name="vesselNumber"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
                            <Form.Item
                                label="ETD"
                                name="etd"
                            >
                                   <DatePicker
                                    format={'DD-MM-YYYY'} style={{ width: '100%' }} />
                            </Form.Item>
                        </Col>
                       
                       
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
                            <Form.Item
                                label="ETA"
                                name="eta"
                            >
                                    <DatePicker
                                    format={'DD-MM-YYYY'} style={{ width: '100%' }} />
                            </Form.Item>
                        </Col>
                        {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
                            <Form.Item
                                label="BL No"
                                name="blNo"
                                rules={[{ required: true, message: 'Enter BL No' }]}
                            >
                                <Input />
                            </Form.Item>
                        </Col> */}
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
                            <Form.Item
                                label="Shipping Liner"
                                name="shippingLiner"
                                rules={[{ required: true, message: 'Enter Shipping Linear' }]}
                            >
                                <Select
                                    showSearch
                                    optionFilterProp="children"
                                    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                    placeholder="Select Line"
                                    allowClear
                                    onChange={handleLinerChange}
                                >
                                    {lineData.map(dropData => {
                                        return <Option key={dropData.id} value={dropData.name}>{dropData.name}</Option>
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
                            <Form.Item label="Authorised By" name="authorisedBy" rules={[{ required: true, message: 'Please Select Authorised By' }]}>
                                <Select
                                    placeholder="Select Authorised By"
                                    showSearch
                                    optionFilterProp="children"
                                    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                    allowClear
                                >
                                    {employeeData.map(dropData => {
                                        return <Option key={dropData.employeeId} value={dropData.employeeId}>{`${dropData.employeeName} ${dropData.employeeLastName}`}</Option>

                                        // return <Option value={dropData.saleOrderId}>{dropData.saleOrderNumber}</Option>
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        
                        <Col style={{ paddingTop: '30px' }}>

                            <Button type="primary" htmlType="submit" >
                                Submit
                            </Button>
                            {/* {(isUpdate === false) &&
                                <Button htmlType="button" style={{ margin: '0 14px' }}
                                // onClick={onReset}
                                >
                                    Reset
                                </Button>
                            } */}
                        </Col>
                    </Row>
                </Form>

            </Card>
        </>
    );
}

export default PostShippedDetails;