import React, { useState, useEffect } from 'react';
import {
  Form,
  Select,
  Card,
  Row,
  Col,
  FormInstance,
  InputNumber,
  Input, Typography,
} from 'antd';
import { OperationTypeEnum} from '@gtpl/shared-models/common-models';
import {  SaleOrderDropDownDto } from '@gtpl/shared-models/sale-management';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { OperationService, ProductionInventoryService} from '@gtpl/shared-services/production';
import './lot-clubbing-form.css';
import { StockService } from '@gtpl/shared-services/procurement';
import { OperationInventoryRequest, ProductionInventoryDetails } from '@gtpl/shared-models/production-management';


/* eslint-disable-next-line */
export interface LotClubbingFormProps {
  key:number
  form: FormInstance<any>
  selectedOperation:(operation:string) => void
  totalQuantity:number;
}

export function LotClubbingForm(
  props: LotClubbingFormProps
) {
  const { Text } = Typography;

  let emquan = 0;
  const {Option} = Select;
  const beHeadingForm = props.form;
  const [loading, setLoading] = useState<boolean>(false);
  const inventoryService = new ProductionInventoryService();
  const [inventory, setInventoryData] = useState<ProductionInventoryDetails[]>([]);
  const { TextArea } = Input;
  const [reasons, setReasons] = useState<any[]>([]);
  const stockService = new StockService();
  const [trigger, setTrigger] = useState<boolean>(false);
  const [loInfo,setLotInfo] = useState<any[]>([]);
  const [saleOrderInfo,setSaleOrderInfo] = useState<any>([]);
const operationservice = new OperationService()
console.log(props.totalQuantity)

  useEffect(() => {
    getReasonsForCycleChecker();
  }, []);

  const onFinish = (values) => {
    setTrigger(true)
  
  };

  useEffect(() =>{
    if(props.totalQuantity){
      beHeadingForm.setFieldsValue({avaQty:Number(props.totalQuantity) + Number(beHeadingForm.getFieldValue('availableQuantity'))})
    }
  },[props.totalQuantity])


  const GetAllLotInformationAginstOperationandlot = () => {
    operationservice.GetAllLotInformationAginstOperationandlot({operation:beHeadingForm.getFieldValue('operation'),lotNumber:beHeadingForm.getFieldValue('lotNumber'),plant:Number(localStorage.getItem('unit_id')),count:beHeadingForm.getFieldValue('count')}).then((res) => {
      if (res.status) {
        console.log((res.data).length)
        if((res.data).length == 1){
          beHeadingForm.setFieldsValue({saleOrderId:res.data[0].saleOrderId,soItemId:res.data[0].saleOrderItemId,availableQuantity:res.data[0].availableQuantity
          })
        }
        setSaleOrderInfo(res.data);

      } else {
        setSaleOrderInfo([]);
      }
    }).catch((err) => {
      AlertMessages.getErrorMessage(err.message);
      setSaleOrderInfo([]);
    });

  }
  const getLotNumbersDropDownForLotClub = (value) => {
    operationservice.getLotNumbersDropDownForLotClub({operation:value,plant: Number(localStorage.getItem('unit_id'))}).then((res) => {
      if (res.status) {
        setLotInfo(res.data);
        // beHeadingForm.setFieldsValue({plantId:res.data[0].plant_id})
        // beHeadingForm.setFieldsValue({subPlantId:res.data[0].sub_plant_id})

      } else {
        setLotInfo([]);
      }
    }).catch((err) => {
      AlertMessages.getErrorMessage(err.message);
      setLotInfo([]);
    });

  }
 

  const getInventoryInfo = () => {
    const operation = beHeadingForm.getFieldValue('operation');
    props.selectedOperation(operation);
    if (operation) {
      setInventoryData([]);
      setLoading(true);
      const req = new OperationInventoryRequest(operation, Number(localStorage.getItem('unit_id')))
      inventoryService.getProductionInventoryInfo(req).then((res) => {
        if (res.status) {
          setInventoryData(res.data);
          setLoading(false);
        } else {
          if (res.intlCode) {
            AlertMessages.getErrorMessage(res.internalMessage);
          } else {
            AlertMessages.getErrorMessage(res.internalMessage);
          }
          setLoading(false);
          setInventoryData([]);
        }
      })
        .catch((err) => {
          setLoading(false);
          setInventoryData([]);
          AlertMessages.getErrorMessage(err.message);
        });
    }
  }

  const getReasonsForCycleChecker = () => {
    stockService
      .getReasonsForCycleChecker()
      .then((res) => {
        if (res.data) {
          setReasons(res.data);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      })
      .catch((err) => {
        AlertMessages.getErrorMessage(err.message);
        setReasons([]);
      });
  };
  const onSearch = (val) => {

  };
  const onBlur = () => {

  };
const lotOnchange = (e,option) =>{
  const lotNo=loInfo.filter((el) =>{return el.prod_inv_id == e})
  console.log(lotNo[0].plant_id,'plant')
  console.log(lotNo[0].sub_plant_id,'subplant')
  beHeadingForm.resetFields(['soItemId','saleOrderId','availableQuantity','plantId','subPlantId'])
  beHeadingForm.setFieldsValue({plantId:lotNo[0].plant_id,subPlantId:lotNo[0].sub_plant_id,lotNumber:option?.lotNumber,count:option?.count})
    GetAllLotInformationAginstOperationandlot();
}
const operationOnChange = (value) =>{
  console.log(value)
  getInventoryInfo();
  beHeadingForm.resetFields(['soItemId','mainlotNo','saleOrderId'])
  getLotNumbersDropDownForLotClub(value)
}
const salorderOnchange = (e) =>{
  beHeadingForm.resetFields(['saleOrderId','availableQuantity'])
  const soId = saleOrderInfo.filter((el) => { return el.saleOrderItemId == e })
  beHeadingForm.setFieldsValue({saleOrderId:soId[0].saleOrderId,availableQuantity:soId[0].availableQuantity
  })
}
  return (
    <div>

      <Card title={false} style={{ textAlign: 'center' }} >
        <Form onFinish={onFinish} layout="vertical" form={beHeadingForm}>
        <Form.Item style={{ display: "none" }} name="lotclubId" >
            <Input hidden />
          </Form.Item>
          <Form.Item
            style={{ display: "none" }}
            name="plantId" >
            <Input hidden />
          </Form.Item>
          <Form.Item
            style={{ display: "none" }}
            name="subPlantId" >
            <Input hidden />
          </Form.Item>
          <Form.Item
            style={{ display: "none" }}
            name="lotNumber" >
            <Input hidden />
          </Form.Item>
          <Form.Item
            style={{ display: "none" }}
            name="count" >
            <Input hidden />
          </Form.Item>
          <Row>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }} style={{ marginLeft: '1%' }}>
              <Form.Item
                name="prevOperation"
                label="Previous Operation"
                rules={[{ required: true, message: 'Missing From details' }]}

              >
                <Select
                  placeholder="Select Previous Operation"
                  allowClear
                  showSearch
                  style={{ width: '100%' }}
                  filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >{Object.values(OperationTypeEnum).map(value =>{
                  return <Option value={value}>{value}</Option>
                })}
                </Select>
              </Form.Item>
            </Col>
           <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }} style={{ marginLeft: '1%' }}>
              <Form.Item
                name="operation"
                label="Operation"
                rules={[{ required: true, message: 'Missing From details' }]}

              >
                <Select
                  placeholder="Select Operation"
                  allowClear
                  showSearch
                  style={{ width: '100%' }}
                  onChange={operationOnChange}
                  filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >{Object.values(OperationTypeEnum).map(value =>{
                  return <Option value={value}>{value}</Option>
                })}
                </Select>
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 6 }} style={{ marginLeft: '1%' }}
            >
              <Form.Item
                name="mainlotNo"
                label="Lot Code"
                rules={[{ required: true, message: 'Missing Lot No' }]}
              >
                <Select
                  placeholder="Select Lot Code"
                  allowClear
                  // onChange={() => getLotNumberInfo()}
                  onChange={(e,option) =>{lotOnchange(e,option)}}
                  showSearch
                  optionFilterProp='children'
                  // filterOption={(input, option) =>
                  //   option.children
                  //     .toLowerCase()
                  //     .indexOf(input.toLowerCase()) >= 0
                  // }
                >
                  {loInfo.map(dropData => {
                    return <Option key={dropData.prod_inv_id} value={dropData.prod_inv_id} lotNumber={dropData.lotNumber} count={beHeadingForm.getFieldValue('operation') == OperationTypeEnum.GRADING ? dropData.output_grade : dropData.input_grade}>{dropData.concatLotNum}-{beHeadingForm.getFieldValue('operation') == OperationTypeEnum.GRADING ? dropData.output_grade : dropData.input_grade}{beHeadingForm.getFieldValue('operation') == OperationTypeEnum.VALUE_ADDITION ? `- ${dropData.product}` : ''}</Option>
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 7 }} style={{ marginLeft: '1%' }}>
            <Form.Item name="soItemId" label="SO Item"
              >
                <Select
                  placeholder="Select SOItem"
                  allowClear
                  showSearch
                  onChange={e => salorderOnchange(e)}
                  filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  {saleOrderInfo.map((dropData) => {return (
                      <Option
                        key={dropData.saleOrderItemId}
                        value={dropData.saleOrderItemId}
                      >
                        {`${dropData.salOrderandItem}`}
                      </Option>
                    );
                  })}
                </Select>

              </Form.Item>

            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 7 }} style={{ marginLeft: '1%' }} hidden>
                <Form.Item name="saleOrderId" label="SO Id"
                >
                  <Input/>
                </Form.Item>

                </Col>
            <Col span={3} xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }} style={{ marginLeft: '1%' }}
            >
              <Form.Item
                name="purpose"
                label="Purpose"
                rules={[{ required: true, message: 'Missing Assigned Time' }]}
              >
                <Select
                  showSearch
                  // style={{ width: 240 }}
                  placeholder="Select Item"
                  optionFilterProp="children"
                  onBlur={onBlur}
                  onSearch={onSearch}
                  filterOption={(input, option) =>
                    option.children
                      .toLowerCase()
                      .indexOf(input.toLowerCase()) >= 0
                  }
                >
                  <Option key={0} value={0}>
                    Select Reason
                  </Option>
                  {reasons.map((reasonDrop) => {
                    return (
                      <Option key={reasonDrop.reason} value={reasonDrop.reason}>
                        {reasonDrop.reason}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </Col>     
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} style={{ marginLeft: '1%' }}>
            <Form.Item name="availableQuantity" label={"Quantity Available"} rules={[{ required: false, message: 'Missing Quantity Available' }]}>
              <InputNumber style={{ width: '100%' }} min={0} disabled />
            </Form.Item>

            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} style={{ marginLeft: '1%' }}>

              <Form.Item name="avaQty" label={"Quantity After clubbing"} rules={[{ required: false, message: 'Missing Quantity Available' }]}>
                <InputNumber style={{ width: '100%' }} min={0} disabled />
              </Form.Item>

            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }} style={{ marginLeft: '1%' }}
            >
              <Form.Item
                name="remarks"
                label="Remarks"
                // rules={[{ required: true, message: 'Missing Remark' }]}
              >
                <TextArea rows={1} />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={5} style={{ textAlign: 'right', paddingTop: '26px' }}>
              <Form.Item>
                <>
                  <Row gutter={24}> 
                  </Row>
                </>

              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>

    </div>
  );
}

export default LotClubbingForm;