import React, { useState, useEffect } from 'react';
import { Form, Input, Card, Button, Select, Row, Col, DatePicker } from 'antd';
import { Link, useHistory } from 'react-router-dom';
import LotClubbingForm from './lot-clubbing-form';
import AddlotCodeForm from './add-lot-clubs-form';
import { ItemssubLotDto, MainLotClubDto } from '@gtpl/shared-models/production-management';
import { BeheadingService } from '@gtpl/shared-services/production';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';

export interface LotMainFormProps{}
export function LotMainForm(props:LotMainFormProps){
  const [lotClubForm] = Form.useForm();
  const [addLotClubForm] = Form.useForm();
  const [lotData, setLotData] = useState<any[]>([])
  const [operation, setOperation] = useState<string>(undefined)
  const [totalQuantity,setQuantity] = useState<number>(0)
  const [lotitemFormKey,setLotitemFormKey] = useState<number>(2)
  const [data,setData]=useState<any>()
  const [visibletable,setVisibletable] = useState<boolean>()
  let history = useHistory()
  const service = new BeheadingService()
  const selectedOperation = (val) => {
    console.log(val);
    setOperation(val);
  }

  const TotalQuantity =  (totalAmount) => {
    console.log(totalAmount)
    setQuantity(totalAmount);
  }


  const getLotData = (lotDataInfo) => {
    
    setLotData(lotDataInfo)
  }
  const saveData = () =>{
    lotClubForm.validateFields().then((LotDetail) =>{
    const LotDetailedArray = []
    lotData.forEach((element) =>{
      console.log(LotDetail)
      console.log(element)
      LotDetailedArray.push(new ItemssubLotDto(element.subLotNumber?element.lotNumber:undefined,element.lotCodesAvailable? element.lotCodesAvailable:undefined,element.quantity?element.quantity:undefined,element?.opBoxes?element.opBoxes:0,element?.count ? element.count : undefined,element.subLotNumber? element.subLotNumber : undefined))
    })

    const mainLotDto = new MainLotClubDto(LotDetail.mainlotNo?LotDetail.lotNumber:undefined,LotDetail.operation?LotDetail.operation:undefined,LotDetail.saleOrderId?LotDetail.saleOrderId:undefined,LotDetail.soItemId?LotDetail.soItemId:undefined,LotDetail.plantId ,LotDetail.subPlantId,LotDetail.purpose?LotDetail.purpose:undefined,LotDetail.remarks?LotDetail.remarks:undefined,LotDetailedArray,LotDetail.availableQuantity?LotDetail.availableQuantity:undefined,LotDetail.prevOperation,LotDetail.count ? LotDetail.count : undefined,LotDetail.avaQty ? LotDetail.avaQty : undefined)
    console.log(mainLotDto)
    if(LotDetailedArray.length >0 && mainLotDto.subLotInfo.length>0){
      service.createLotClubbing(mainLotDto).then((res) =>{
        if(res.status){
          AlertMessages.getSuccessMessage(res.internalMessage)
          lotClubForm.resetFields();
          addLotClubForm.resetFields();
          setVisibletable(false);
        }else{
          AlertMessages.getInfoMessage(res.internalMessage)
        }
      })
    }else{
      AlertMessages.getErrorMessage('Add ClubbedLots data');

    }
    })
  }
  
 console.log(visibletable)
    return(
        <Card 
        title={<span style={{ color: 'white' }}>Lot Clubbing</span>}
        extra={<Link to='/lot-clubbing-view' ><Button type="primary">View</Button></Link>} 
      style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
        >
            <LotClubbingForm key={lotitemFormKey} form={lotClubForm} selectedOperation={selectedOperation} totalQuantity={totalQuantity}/>
            <AddlotCodeForm visibletable={visibletable} operation={operation} form={addLotClubForm} totalQuantity={TotalQuantity} lotData = {getLotData}/>
            <Row justify='end'>
          <Col span={2}>
          <Button 
          onClick={saveData} 
          type='primary'>
            Submit
          </Button>
        </Col>
      </Row>
        </Card>
    )

}export default LotMainForm