import React, { useEffect, useState } from 'react';
import { Card, Button, Form, Row, Col, Select, Input, DatePicker, Radio, Table } from 'antd';
import './container-register.css';
import { Redirect, useHistory, useLocation } from 'react-router-dom';
import { SaleOrderService } from '@gtpl/shared-services/sale-management';
import { ContainerRegisterService } from '@gtpl/shared-services/logistics';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { SaleOrderDropDownDto } from '@gtpl/shared-models/sale-management';
import { ContainerSizeEnum, ContainerStatusEnum, ContainerStatusInput, ModeOfExportEnum } from '@gtpl/shared-models/common-models';
import moment from 'moment';
import { BookContainerDto, ContainerStatusInfo, marksAndNoReq } from '@gtpl/shared-models/logistics';
import Link from 'antd/lib/typography/Link';
import { MinDate, minDate } from 'class-validator';

/* eslint-disable-next-line */
export interface BookContainerProps { }
const { Option } = Select;
export function BookContainer(
    props: BookContainerProps
) {
    let location = useLocation();
    const containerStatusInfo: ContainerStatusInfo | any = location.state;
    console.log(containerStatusInfo,'iiiiiiiiiii');
    const history = useHistory();
    const [containerRegisterForm] = Form.useForm();
    const [isUpdate, setIsUpdate] = useState<boolean>(false);
    const [afterSubmitDisable, setAfterSubmitDisable] = useState<boolean>(false);

    // const [saleOrderData, setSaleOrderData] = useState<SaleOrderDropDownDto[]>([]);
    const [saleOrderData, setSaleOrderData] = useState<any[]>([]);
    const [saleOrderItemsData, setSaleOrderItemsData] = useState<any[]>([]);

    const [tab, setTab] = useState<string>(undefined);

    const SoService = new SaleOrderService();
    const containerRService = new ContainerRegisterService();
    const [exportModeBasedlabel,setExportModeBasedLabel] = useState<string>(ModeOfExportEnum.CONTAINER)

    useEffect(() => {
        getSaleOrderData();
        getaleOrderItemsData()
        if (containerStatusInfo) {
            containerRegisterForm.setFieldsValue({
                saleOrderId: containerStatusInfo.saleOrderId,
                containerStatus: ContainerStatusEnum.BOOKED,
                containerId: containerStatusInfo.containerId,
                referenceNumber: containerStatusInfo.referenceNumber,
                scac: containerStatusInfo.scac
            });
        } else {
            containerRegisterForm.setFieldsValue({
                containerStatus: ContainerStatusEnum.BOOKED
            });
        }
    }, [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 getaleOrderItemsData = () =>{
SoService.getSaleOrderDetailsById({saleOrderId:Number(containerStatusInfo.saleOrderId)}).then((res)=>{
    if(res.status){
        setSaleOrderItemsData(res.data.itemData)
  }
  else{
    setSaleOrderItemsData([])
  }
})
}
const saleItemsColumns = [
    {
        title: 'S No', dataIndex: 'sNo', render: (text, object, index) => {
          if (index == saleOrderItemsData.length) {
            return null;
          } else {
            return index + 1
          }
        },
        width: 60,
  
      },
      {
        title: 'Variant', 
       dataIndex: 'shortCode',
      },
      {
        title: 'Pack Style', 
       dataIndex: 'packingStyle',
      },
      {
        title: 'No of Cases', 
       dataIndex: 'cases',
      },
      {
        title: 'net Weight', 
       dataIndex: 'netWeight',
      },
      {
        title: 'Unit Price', 
       dataIndex: 'unitPrice',
      },
      {
        title: 'Product Description', 
       dataIndex: 'productDescrption',
      },
      {
        title: "Marks & No",
        dataIndex: "marksNo",
        render: (text, record, index) => (
          <Input
            value={record.marksNo}
            onChange={(e) => handleRowInputChange(record.saleOrderItemId,e.target.value)}
          />
        ),
      },
    ];
    
    const [rowValues, setRowValues] = useState<Record<number, string>>({}); // To store row-wise input values

// Function to update row values
const handleRowInputChange = (rowId, value) => {
    console.log(value,rowId,'ooooooooooooooo');
    
    setRowValues((prev) => ({ ...prev, [rowId]: value }));
};

    const onReset = () => {
        containerRegisterForm.resetFields();
        containerRegisterForm.setFieldsValue({
            saleOrderId: containerStatusInfo.saleOrderId,
        });
        containerRegisterForm.setFieldsValue({
            containerStatus: ContainerStatusEnum.BOOKED
        });
    }
    const disabledDate = (current) => {
        // Can not select days before today and today
        return current && current < moment().endOf('day');
    };

    const saveData = (values) => {
        const formattedTableData: marksAndNoReq[] = Object.entries(rowValues).map(([rowId, marksAndNo]) => 
            new marksAndNoReq(Number(rowId), marksAndNo)
        );
        console.log(formattedTableData,'reqqqqqqqqqq');
        const req= new BookContainerDto(values.referenceNumber,values.containerSize,values.branchCode,values.tempIndicatorNo,values.freightAfterShipment,values.expectedDeliveryDate,values.saleOrderId,values.containerStatus,localStorage.getItem('createdUser'),values.containerNumber,values.vesselSchedule,values.vesselNumber,values.lineSeal,values.transporter,values.vehicleNumber,values.driverName,values.phoneNumber,values.cha,values.qcReport,values.buyerInspectionReport,values.vesselScheduleApproval,values.temperature,values.scrollNo,values.scrollDate,values.portCode,values.shippingBillDate,values.shippingBillNo,values.examinationDate,values.stuffingStartTime,values.stuffingCompletionTime,values.timeTakenForStuffing,values.authorisedBy,values.containerId,localStorage.getItem('createdUser'),values.scac,Number(localStorage.getItem("unit_id")),values.modeOfExport,formattedTableData)
        // values.createdUser = localStorage.getItem('createdUser');
        // values.updatedUser = localStorage.getItem('createdUser');
        // values.unitId = localStorage.getItem("unit_id");
        
        setAfterSubmitDisable(true);
        containerRService.bookContainer(req).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 goToContainerGrid = () => {
        setTab("Ready to Book");
    }

    const onModeOfExport = (e) => {
        setExportModeBasedLabel(e.target.value)
    }

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

            <Card title={<span style={{ color: 'white' }}>Slot Booking</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>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
                            <Form.Item name='modeOfExport' label='Mode Of Export' initialValue={ModeOfExportEnum.CONTAINER} rules={[{required:true,message:'Mode of export is mandatory'}]}>
                                <Radio.Group defaultValue={ModeOfExportEnum.CONTAINER} onChange={onModeOfExport}>
                                    {
                                        Object.values(ModeOfExportEnum).map(e => {
                                            return(
                                            <Radio key={e} value={e}>{e}</Radio>
                                            )
                                        })
                                    }
                                </Radio.Group>
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 6 }}>
                            <Form.Item name="saleOrderId" label="Sale Order Number" 
                            // rules={[{ required: true, message: 'Missing SaleOrder' }]}
                            >
                                <Select
                                    placeholder="Select SaleOrderNumber"
                                    allowClear
                                    disabled={true}
                                >
                                    <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: 5 }} >

                            <Form.Item label="Liner Booking No" name="referenceNumber" rules={[{ required: false, message: 'Missing Reference Number' }]} >
                                <Input />
                            </Form.Item>
                        </Col>

                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
                            <Form.Item
                                name="scac"
                                label="SCAC"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
                            <Form.Item
                                name="containerNumber"
                                label={exportModeBasedlabel == ModeOfExportEnum.CONTAINER ? 'Container No' : 'Flight No'}
                                rules={[{ required: true, message: 'Missing Container Number' }]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }} hidden={exportModeBasedlabel == ModeOfExportEnum.FLIGHT ? true : false}>

                <Form.Item label="Container Size" name="containerSize" rules={[{ required: exportModeBasedlabel == ModeOfExportEnum.CONTAINER ? true : false, message: 'Missing Container Size' }]} >
                <Select
                  placeholder="Select Container Size"
                  style={{ textAlign: "center" }}
                  showSearch
                  // defaultValue={ActionEnum.ADD}
                >
                  {Object.keys(ContainerSizeEnum).map((containerSize) => {
                    return (
                      <Select.Option value={ContainerSizeEnum[containerSize]}>
                        {ContainerSizeEnum[containerSize]}
                      </Select.Option>
                    );
                  })}
                </Select>
</Form.Item>
</Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
                            <Form.Item
                                name="cha"
                                label="CHA"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }} >
                            <Form.Item
                                name="vesselSchedule"
                                label="Vessel Schedule"
                            >
                                <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
                                name="vesselNumber"
                                label="Vessel No"
                            >
                                <Input />
                            </Form.Item>
                        </Col> */}
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
                            <Form.Item
                                name="transporter"
                                label="Transporter"
                                rules={[
                                    {
                                      required: true,
                                      message: 'Missing Transporter'
                                    }
                                  ]}>
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
                            <Form.Item
                                name="lineSeal"
                                label="Liner Seal No"
                                rules={[
                                    {
                                      required: exportModeBasedlabel == ModeOfExportEnum.CONTAINER ? true : false,
                                      message: 'Missing Seal No'
                                    }
                                  ]}>
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }} >
                            <Form.Item
                                name="vehicleNumber"
                                label="Vehicle No"
                                rules={[
                                    {
                                      required: true,
                                      message: 'Missing Vehicle No'
                                    }
                                  ]}>
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }} >
                            <Form.Item
                                name="driverName"
                                label="Driver Name"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }} >
                            <Form.Item
                                name="phoneNumber"
                                label="Driver Ph Number"
                                rules={[
                                    {
                                        pattern: /^[0-9]+$/,
                                        message: 'Please enter a valid phone number (numbers only)',
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}  >
                            <Form.Item
                                name="expectedDeliveryDate"
                                label="ETA (to Plant)"
                                rules={[{ required: true, message: 'Missing Expected Delivery Date' },
                                ]} initialValue={moment()}>

                                <DatePicker
                                    format={'DD-MMMM-YYYY'}
                                    style={{ width: '100%' }}
                                    // disabledDate={disabledDate}

                                />

                            </Form.Item>
                        </Col>




                    {/* </Row> */}
                    {/* <Row gutter={24}> */}
                        <Col  hidden>
                            <Form.Item
                                name="containerStatus"
                                label="Container Status"
                                rules={[
                                    {
                                        // required: true, message: 'Missed Container Status'
                                    },
                                ]}>
                                <Select
                                    placeholder="Select Container Status"
                                    defaultValue={ContainerStatusEnum.BOOKED}
                                    disabled={true}
                                >
                                    <Option key={0} value={null}>Select Container Status</Option>
                                    {ContainerStatusInput.map((container) => {
                                        return <Option key={container.status} value={container.status}>{container.status}</Option>
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        </Row>
                        {exportModeBasedlabel == ModeOfExportEnum.FLIGHT ?(<Row>
                        <Col>
                        <Table columns={saleItemsColumns}dataSource={saleOrderItemsData} size='small' pagination={false}/>
                        </Col>
                        </Row>):''}
                        
                        <Row>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 2 }} style={{marginTop:'2.5%'}}>
                            <Button type="primary" htmlType="submit" disabled={afterSubmitDisable} >
                                Submit
                            </Button>
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 2 }} style={{marginTop:'2.5%'}}>
                            {(isUpdate === false) &&
                                <Button htmlType="button" style={{ margin: '0 14px' }} onClick={onReset}>
                                    Reset
                                </Button>
                            }
                        </Col>
                    </Row>
                </Form>
            </Card>
        </>
    );
}

export default BookContainer;