import React, { useEffect, useState } from 'react';
import { Card, Button, Form, Row, Col, Select, Input, DatePicker, Upload, Typography, UploadProps, Descriptions, Space, Modal } 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 { SaleOrderDetailViewInfoDTO, SaleOrderDropDownDto } from '@gtpl/shared-models/sale-management';
import { ContainerStatusEnum, ContainerStatusInput, DocumentType, LoadingContainerDto, LoadingSheetSaleOrderReq } 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, MinusCircleOutlined } from '@ant-design/icons';
import { HrmsEmployeeDetailsDto } from '@gtpl/shared-models/masters';
import { HrmsEmpDetService } from '@gtpl/shared-services/masters';
import LoadingSheetPrint from 'libs/pages/logistics/logistics-components/documents/src/lib/loading-sheet-print';



/* eslint-disable-next-line */
export interface LoadingSheetProps { 
  saleOrderId: number;
}
const { Option } = Select;
export function LoadingSheetSaleOrder(
  props: LoadingSheetProps) {

  let location = useLocation();

  // const containerStatusInfo: ContainerStatusInfo | any = location.state;
  const propsId=props.saleOrderId
  
  const [containerRegisterForm] = Form.useForm();
  const [isUpdate, setIsUpdate] = useState<boolean>(false);
  const [filelist, setfilelist] = useState([]);
  const [fieldsData, setFieldsData] = useState<DocumentsListRequest>(undefined);

  const [saleOrderData, setSaleOrderData] = useState<any[]>([]);
  const [tab, setTab] = useState<string>(undefined);
  const [employeeData, setEmployeeData] = useState<HrmsEmployeeDetailsDto[]>([]);
  const [current, setCurrent] = useState<any>();
  const SoService = new SaleOrderService();
  const containerRService = new ContainerRegisterService();
  const employeeService = new HrmsEmpDetService();
  const [loadingSheetDescriptionDetails, setLoadingSheetDescriptionDetails] = useState<any>([]);
  
  const service2 = new SaleOrderService;
  const [soData, setSoData] = useState<SaleOrderDetailViewInfoDTO>(undefined);
  const [variety, setVariety] = useState<any[]>([]);
  const [selectedLoadingSheetPrint, setSelectedLoadingSheetPrint] = useState<any>([]);
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);


  const history = useHistory();
  const initialValues = {
    familyDetails: [''],
  }

  useEffect(() => {
    // getLoadingSheetData();
    // getSaleOrderDetails();
    // getImCode();
  }, []);


  useEffect(() => {
    if (props.saleOrderId) {
      // console.log(props);
      getLoadingSheetData( props.saleOrderId);
    }
  }, [props.saleOrderId]);

  useEffect(() => {
    if (props.saleOrderId) {
      // console.log(props);
      getVarietyData( props.saleOrderId);
    }
  }, [props.saleOrderId]);

  const getVarietyData=(saleorderId)=>{
    containerRService.getVarietyForLoadingSheet(new LoadingSheetSaleOrderReq(saleorderId)).then((res) => {
      if (res.status) {
        setVariety(res.data);
      } else {
        if (res.intlCode) {    
          setVariety(undefined);
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    })
      .catch((err) => {
        AlertMessages.getErrorMessage(err.message);
        setVariety(undefined);
      });
  }

  // useEffect(() => {
  //   getSaleOrderData();
  //   console.log(containerStatusInfo)
  //   if (containerStatusInfo) {
  //     containerRegisterForm.setFieldsValue({
  //       saleOrderId: containerStatusInfo.saleOrderId,
  //       containerStatus: ContainerStatusEnum.LOADED_AND_SEALED,
  //       containerId: containerStatusInfo.containerId,
  //       containerNo: containerStatusInfo.containerNo,
  //       scac: containerStatusInfo.scac
  //     });
  //   } else {
  //     containerRegisterForm.setFieldsValue({
  //       containerStatus: ContainerStatusEnum.LOADED_AND_SEALED
  //     });
  //   }
  // }, [containerStatusInfo]);

  // get sale order drop down details

const getLoadingSheetData=(saleorderId)=>{
  containerRService.getLoadingSheetDescriptionDetails(new LoadingSheetSaleOrderReq(saleorderId)).then((res) => {
    if (res.status) {
      setLoadingSheetDescriptionDetails(res.data);
    } else {
      if (res.intlCode) {    
        setLoadingSheetDescriptionDetails(undefined);
        AlertMessages.getErrorMessage(res.internalMessage);
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    }
  })
    .catch((err) => {
      AlertMessages.getErrorMessage(err.message);
      setLoadingSheetDescriptionDetails(undefined);
    });
}



const getSaleOrderDetails= (saleorderId) => {
  service2.getSaleOrderInformationById({saleOrderId:saleorderId}).then(res => {
    if (res.status) {
      setSoData(res.data);
      // getPostSailingDocuments(res.data.saleOrderId);
    } else {
      if (res.intlCode) {
        setSoData(undefined);
          AlertMessages.getErrorMessage(res.internalMessage);
      } else {
       AlertMessages.getErrorMessage(res.internalMessage);
      }
    }
  }).catch(err => {
    AlertMessages.getErrorMessage(err.message);
    setSoData(undefined);
  })
}


  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 onReset = () => {
  //   containerRegisterForm.resetFields();
  //   if (containerStatusInfo) {
  //     containerRegisterForm.setFieldsValue({
  //       saleOrderId: containerStatusInfo.saleOrderId,
  //       containerStatus: ContainerStatusEnum.PRE_CHECK_LIST,
  //       containerId: containerStatusInfo.containerId,
  //       containerNo: containerStatusInfo.containerNo,
  //       scac: containerStatusInfo.scac
  //     });
  //   } else {
  //     containerRegisterForm.setFieldsValue({
  //       containerStatus: ContainerStatusEnum.PRE_CHECK_LIST
  //     });
  //   }
  // }
  const documentsListService = new DocumentsListService();
const service=new ContainerRegisterService()
const [tableData, setTableData] = useState<any[]>([]);


  const onSubmit = () => {
    containerRegisterForm
      .validateFields()
      .then((values) => {
        // values.loadingSheetReq = tableData;

        const req = new LoadingContainerDto(
       null,propsId,values.loadingDetails
        )
        service
          .createLoadingSheet(req)
          .then((res) => {
            if (res.status) {
              console.log(res,"variiiiiiietyyyyyyyyrespppppppppponseeeeeeeeee")
              AlertMessages.getSuccessMessage("Created Successfully");
              setTimeout(() => {
                // navigate("/bom/z-factors-view");
              }, 500)
            } else {
              AlertMessages.getErrorMessage("Failed");
            }
          })
          .catch((err) => console.log(err.message));
      })
      .catch((err) => console.log(err.message));
  };


  const loadingDetailsAffix = () => {
    setCurrent(0)
  }

  const handleAdd = (fields) => {
    const lotNoFieldName = ['lotNo'];
    let nextLotNo = 1;
    if (fields.length > 0) {
      const lastField = fields[fields.length - 1];
      const lastFieldValue = containerRegisterForm.getFieldValue([...lastField.name, ...lotNoFieldName]);
      nextLotNo = parseInt(lastFieldValue) + 1;
    }
    containerRegisterForm.setFieldsValue({
      [`${fields.length - 1}`]: {
        ...containerRegisterForm.getFieldValue(`${fields.length - 1}`),
        ...{
          lotNo: nextLotNo
        }
      }
    });
  };

  const clearData = () => {
    containerRegisterForm.resetFields()
  }


  const displayPrint = (propsId) => {
    
    setSelectedLoadingSheetPrint(propsId);
    setIsModalVisible(true);
  };

  // useEffect(() => {
  //   containerRegisterForm.setFieldsValue({
  //     loadingDetails: containerRegisterForm.getFieldValue('loadingDetails').map((detail, index) => ({
  //       ...detail,
  //       lotNumber: index + 1,
  //     })),
  //   });
  // }, [containerRegisterForm]);

  // const handleAdd = (add, fields) => {
  //   add();
  //   const currentFields = containerRegisterForm.getFieldValue('loadingDetails');
  //   containerRegisterForm.setFieldsValue({
  //     loadingDetails: currentFields.map((field, index) => ({
  //       ...field,
  //       lotNumber: index + 1,
  //     })),
  //   });
  // };

  const handleRemove = (remove, name, fields) => {
    remove(name);
    const currentFields = containerRegisterForm.getFieldValue('loadingDetails');
    containerRegisterForm.setFieldsValue({
      loadingDetails: currentFields.map((field, index) => ({
        ...field,
        lotNumber: index + 1,
      })),
    });
  };

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

      <Card 
      extra={<Link onClick={() => displayPrint(propsId)} ><span style={{ color: 'white' }} ><Button className='panel_button' >Print </Button> </span></Link>}
      // title={<span style={{ color: 'white' }}>Loading Sheet</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>
            <Row>
              <Col>PO No: {loadingSheetDescriptionDetails.poNumber}</Col>
            </Row>
            </Form> */}
        <Descriptions column={3}>
          <Descriptions.Item label="PO No. ">
            {loadingSheetDescriptionDetails[0]?.poNumber?loadingSheetDescriptionDetails[0]?.poNumber:'-'}
          </Descriptions.Item>
          <Descriptions.Item label="Date">
            {moment(loadingSheetDescriptionDetails?.date).format('YYYY/MM/DD')}
          </Descriptions.Item>
          <Descriptions.Item label="Container No.">
          {loadingSheetDescriptionDetails[0]?.container_number?loadingSheetDescriptionDetails[0]?.container_number:'-'}
          </Descriptions.Item>
          <Descriptions.Item label="Brand">
          {loadingSheetDescriptionDetails[0]?.brandName?loadingSheetDescriptionDetails[0]?.brandName:'-'}
          </Descriptions.Item>
        </Descriptions>
        <Form layout="vertical" form={containerRegisterForm} initialValues={initialValues} name="control-hooks" onFinish={onSubmit}>
      <Row gutter={24}>
        <Form.List name="loadingDetails">
          {(fields, { add, remove }) => (
            <Card style={{ marginLeft: "50px" }}>
              {fields.map((field, index) => (
                <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }}>
                  <Form.Item name={[field.name, 'loadingSheetId']} fieldKey={[field.fieldKey, 'loadingSheetId']}>
                    <Input hidden />
                  </Form.Item>
                  <Form.Item name="saleOrderId" label="SO Number" hidden>
                    {/* <Select
                      placeholder="Select SaleOrder"
                      allowClear
                      disabled
                    >
                      {saleOrderData.map(dropData => {
                        return <Option value={dropData.saleOrderId}>{`${dropData.poNumber}-${dropData.brandName}-${dropData.variantCode}`}</Option>
                      })}
                    </Select> */}
                  </Form.Item>
                  <Row gutter={24}>
                    <Col span={6}>
                      <Form.Item
                        {...field}
                        label="Lot No"
                        name={[field.name, 'lotNumber']}
                        initialValue={index + 1}
                        fieldKey={[field.fieldKey, 'lotNumber']}
                        normalize={(value, prevValue, allValues) => index + 1}
                      >
                        <Input readOnly value={index + 1}/>
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item
                        label="Variety"
                        name={[field.name, 'variety']}
                        fieldKey={[field.fieldKey, 'variety']}
                      >
                        <Select
                          showSearch
                          optionFilterProp="children"
                          filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                          placeholder="Select Variety"
                          onFocus={loadingDetailsAffix}
                          allowClear
                        >
                          {variety.map(dropData => (
                            <Option key={dropData.sku_code_id} value={dropData.sku_code_id} name={dropData.sku_code_id}>
                              {dropData.short_code}
                            </Option>
                          ))}
                        </Select>
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item
                        {...field}
                        label="Count"
                        name={[field.name, 'count']}
                        fieldKey={[field.fieldKey, 'count']}
                        rules={[
                          {
                            required: true,
                            message: "Enter a valid Count",
                            max: 12
                          },
                          {
                            pattern: /^[0-9]*$/,
                            message: `Should contain only numbers.`
                          }
                        ]}
                      >
                        <Input onFocus={loadingDetailsAffix} placeholder='Enter Count' />
                      </Form.Item>
                    </Col>
                  </Row>
                  <MinusCircleOutlined onClick={() => handleRemove(remove, field.name, field.key)} />
                </Space>
              ))}
              <Form.Item>
                <Button type="dashed" onFocus={loadingDetailsAffix} onClick={() => add()} block icon={<PlusOutlined />}>
                  Add
                </Button>
              </Form.Item>
            </Card>
          )}
        </Form.List>
      </Row>
      <Row style={{ justifyContent: "end" }}>
        <Col style={{ paddingTop: '30px', alignContent: "flex-end" }}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
          {(isUpdate === false) &&
            <Button htmlType="button" style={{ margin: '0 14px' }} onClick={clearData}>
              Reset
            </Button>
          }
        </Col>
      </Row>
    </Form>
        <Modal visible={isModalVisible} onCancel={() => setIsModalVisible(false)} width={'80%'} footer={[]}>
                <LoadingSheetPrint saleOrderId={propsId}/>
            </Modal>
      </Card>
    </>
 
  );
}

export default LoadingSheetSaleOrder;