import React, { useEffect, useState } from 'react';
import { Card, Button, Form, Row, Col, Select, Input, Radio, 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 } from '@gtpl/shared-services/logistics';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { ContainerStatusEnum } from '@gtpl/shared-models/common-models';
import { ContainerStatusInfo } from '@gtpl/shared-models/logistics';
import Link from 'antd/lib/typography/Link';
import { HrmsEmpDetService } from '@gtpl/shared-services/masters';
import { HrmsEmployeeDetailsDto } from '@gtpl/shared-models/masters';

const { Option } = Select;

export interface PreCheckProps {}

export function PreCheck(props: PreCheckProps) {
    let location = useLocation();
    const options = [
        { label: 'Yes', value: true },
        { label: 'No', value: false },
    ];
    const containerStatusInfo: ContainerStatusInfo | any = location.state;
    const [containerRegisterForm] = Form.useForm();
    const [afterSubmitDisable, setAfterSubmitDisable] = useState<boolean>(false);
    const [saleOrderData, setSaleOrderData] = useState<any[]>([]);
    const [tab, setTab] = useState<string>(undefined);
    const [employeeData, setEmployeeData] = useState<HrmsEmployeeDetailsDto[]>([]);
    const [initialValues, setInitialValues] = useState();
    const [isTempInfoDisabled, setIsTempInfoDisabled] = useState<boolean>(true);

    const SoService = new SaleOrderService();
    const containerRService = new ContainerRegisterService();
    const employeeService = new HrmsEmpDetService();

    const history = useHistory();

    useEffect(() => {
        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,
                temperaturee: containerStatusInfo.temperaturee,
                qcReport: containerStatusInfo.qcReport == 1 ? true : false,
                buyerInspectionReport: containerStatusInfo.buyerInspectionReport == 1 ? true : false,
                vesselScheduleApproval: containerStatusInfo.vesselScheduleApproval == 1 ? true : false,
                temperature: containerStatusInfo.temperature == 1 ? true : false
            });
            if (containerStatusInfo.temperaturee) {
                setIsTempInfoDisabled(true);
            }
        } else {
            containerRegisterForm.setFieldsValue({
                containerStatus: ContainerStatusEnum.LOADED_AND_SEALED
            });
        }
    }, [containerStatusInfo]);

    const getSaleOrderData = () => {
        SoService.getSoPoBrandDropDownList().then((res) => {
            if (res.status) {
                setSaleOrderData(res.data);
            } else {
                AlertMessages.getErrorMessage(res.internalMessage);
                setSaleOrderData([]);
            }
        }).catch((err) => {
            AlertMessages.getErrorMessage(err.message);
            setSaleOrderData([]);
        });
    }

    const getLogisticsPersonsData = () => {
        employeeService.getActiveEmployeesByDept({ employeeDept: "logistics" }).then((res) => {
            if (res.status) {
                setEmployeeData(res.data);
            } else {
                setEmployeeData([]);
            }
        }).catch((err) => {
            AlertMessages.getErrorMessage(err.message);
            setEmployeeData([]);
        });
    }

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

        setAfterSubmitDisable(true);
        containerRService.Checklist(values).then(res => {
            if (!res.status) {
                AlertMessages.getErrorMessage(res.message);
            } else {
                goToContainerGrid();
                AlertMessages.getSuccessMessage(res.internalMessage);
            }
            setAfterSubmitDisable(false);
        }).catch(err => {
            setAfterSubmitDisable(false);
            AlertMessages.getErrorMessage(err.message);
        })
    }

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

    const handleTempDegreeChange = (e) => {
        const value = e.target.value;
        setIsTempInfoDisabled(!value);
    }

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

            <Card title={<span style={{ color: 'white' }}>Checklist</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} initialValues={initialValues}
                >
                    <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 => (
                                        <Option key={dropData.saleOrderId} value={dropData.saleOrderId}>
                                            {`${dropData.poNumber}-${dropData.brandName}-${dropData.variantCode}`}
                                        </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>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 3 }} lg={{ span: 3 }} xl={{ span: 3 }} >
                            <Form.Item label="Qc Report" name="qcReport" rules={[{ required: true, message: 'Missing QcReport' }]}>
                                <Radio.Group options={options}
                                    optionType="button"
                                    buttonStyle="solid"
                                    style={{ display: 'flex', justifyContent: 'left' }}
                                    size='middle'>
                                </Radio.Group>
                            </Form.Item>
                        </Col>

                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
                            <Form.Item label="Buyer Inspection Report" name="buyerInspectionReport" rules={[{ required: true, message: 'Buyer Inspection Report' }]}>
                                <Radio.Group options={options}
                                    optionType="button"
                                    buttonStyle="solid"
                                    style={{ display: 'flex', justifyContent: 'left' }}
                                    size='middle'>
                                </Radio.Group>
                            </Form.Item>
                        </Col>

                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }} >
                            <Form.Item label="Vessel Schedule Approval" name="vesselScheduleApproval" rules={[{ required: true, message: 'Vessel Schedule Approval' }]}>
                                <Radio.Group options={options}
                                    optionType="button"
                                    buttonStyle="solid"
                                    style={{ display: 'flex', justifyContent: 'left' }}
                                    size='middle'>
                                </Radio.Group>
                            </Form.Item>
                        </Col>

                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
                            <Form.Item label="Temperature Info" name="temperature" rules={[{ required: true, message: 'Temperature is required' }]}>
                                <Radio.Group options={options}
                                    optionType="button"
                                    buttonStyle="solid"
                                    style={{ display: 'flex', justifyContent: 'left' }}
                                    size='middle'
                                    disabled={isTempInfoDisabled}>
                                </Radio.Group>
                            </Form.Item>
                        </Col>

                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
                            <Form.Item
                                name="temperaturee"
                                label="Temperature Degree"
                                rules={[
                                    {
                                        required: true,
                                        message: 'Temperature is Required',
                                    },
                                ]}>
                                <Input onChange={handleTempDegreeChange} />
                            </Form.Item>
                        </Col>
                    
                        <Col style={{ paddingTop: '30px' }}>
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                        </Col>
                    </Row>
                </Form>
            </Card>
        </>
    );
}

export default PreCheck;