import React, { useEffect, useState } from 'react';
import { Form, Input, Select, Card, Row, Col, Upload, message, UploadProps, DatePicker, FormInstance, InputNumber, Button } from 'antd';
import { Link, Redirect } from 'react-router-dom';
import { OperationTypeEnum, PlantsEnum, ShiftsEnum, SubPlantCodesEnum, WorkStationTypeEnum } from "@gtpl/shared-models/common-models";
import { SoakingAssignmentService, ProdInvService, ProductionInventoryService, WorkstationService } from "@gtpl/shared-services/production";
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { LotCodeDropDown, LotInformationRequest, LotNoInfo, LotNumberRequest, WorkStationCategoryReq, WorkstationDTO, WorkStationsDropDown } from '@gtpl/shared-models/production-management';

import './assign-soaking-material.css';
import moment from 'moment';

const { Option } = Select;

export interface AssignTempSoakingMaterialProps{}

export function AssignTempSoakingMaterial(props:AssignTempSoakingMaterialProps){
  const [disable, setDisable] = useState<boolean>(false)
  const [assignSoakingMaterialForm] = Form.useForm();
  const [workStationData, setWorkStationData] = useState<WorkstationDTO>(undefined);


  const checkWorkStationCapacity = () => {
  const workstationService = new WorkstationService();
    const lotQty = assignSoakingMaterialForm.getFieldValue("physicalQuantity");
    const plant = Number(localStorage.getItem('unit_id'))
    const workStationId = assignSoakingMaterialForm.getFieldValue("workstation")
    const [workStations, setWorkStations] = useState<WorkStationsDropDown[]>([]);

    if(workStationId>0){
      workstationService.getWorkstationCapacity({workstationId:workStationId,unitId:plant}).then((res) => {
        if(res.status){
          console.log(lotQty);
          console.log(res.data);

          if(Number(lotQty) > Number(res.data.workstationUnitCapacity)){
            AlertMessages.getWarningMessage("WorkStation capacity exceeded. ");
            assignSoakingMaterialForm.setFieldsValue({workstation:null});
          }
          setWorkStationData(res.data);
        }else{
          setWorkStationData(undefined);
        }
      }).catch((err) => {
        setWorkStationData(undefined);
        AlertMessages.getErrorMessage(err.message);
      });
    }
    else{
      AlertMessages.getWarningMessage("Please select workStation. ");
    }
  }

    return(
      <></>
    //     <Card title={<span style={{ color: 'white' }}>Soaking Assignment</span>}
    //   style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }} extra={<Link to='/soaking-assignment-grid' ><Button className='panel_button' >View </Button></Link>}>
    //   <Form layout={'vertical'} form={assignSoakingMaterialForm} name="control-hooks">

    //     <Row gutter={24}>
    //       <Form.Item name="productionInventoryId" >
    //         <Input hidden />
    //       </Form.Item>
    //       <Form.Item name="boxes" >
    //         <Input hidden />
    //       </Form.Item>
    //       <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }} style={{ display: (workStationType == WorkStationTypeEnum.INTERNAL) ? 'block' : 'none' }}>
    //         <Form.Item name="workstation" label="Workstation" rules={[{ required: true, message: 'Missing Workstation' }]} >
    //         <Select
    //           placeholder="Select Workstation"
    //           onChange={checkWorkStationCapacity}
    //           allowClear
    //         >
    //           {workStations.map(dropData => {
    //                   return <Option key={dropData.workstationId} value={dropData.workstationId}>{dropData.workstation}</Option>
    //                 })}
    //         </Select>
    //       </Form.Item>
    //       </Col>
    //       <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5, }} lg={{ span: 5, }} xl={{ span: 5, }}>
    //       <Form.Item name="assignedTime" label="Input Time" rules={[{ required: true }]} initialValue={moment()}>
    //               <DatePicker showTime={{format: "HH:mm"}} style={{ width: '100%' }} format="YYYY-MM-DD HH:mm:ss"
    //               showToday={true} defaultValue={moment('YYYY-MM-DD HH:mm:ss')}/>
    //           </Form.Item>
    //       {/* <Form.Item  name="assignedTime" label="Input Time" rules={[{ required: true,message: 'Missing Input Time' }]}>
    //       <DatePicker showTime={{format: "HH:mm"}} style={{ width: '100%' }} format="YYYY-MM-DD HH:mm:ss"
    //               showToday={true} defaultValue={moment('YYYY-MM-DD HH:mm:ss')}/>
           
    //         </Form.Item> */}
    //       </Col>
    //       <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>

    //         <Form.Item name="subLotNumber" label="Sub Lot Code" rules={[{ required: true, message: 'Missing Sub Lot Code' }]}>
    //           <Select
    //             placeholder="Select Sub Lot Code"
    //             allowClear
    //             onChange={getLotNumberInfo}
    //             dropdownMatchSelectWidth={false}
    //           >
    //             {lotNumbers.map(dropData => {
    //               return <Option key={dropData.subLotNumber} value={dropData.subLotNumber}>{dropData.subLotNumber}</Option>
    //             })}
    //           </Select>
    //         </Form.Item>

    //       </Col>
    //       <Form.Item name="saleOrderId">
    //           <Input hidden/>
    //         </Form.Item>
    //       <Form.Item name="saleOrderItemId">
    //           <Input hidden/>
    //         </Form.Item>
    //         <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
    //         <Form.Item name="saleOrder" label="SO Number" rules={[{ required: true, message: 'Missing Sale Order No' }]}>
    //           <Input disabled/>
    //         </Form.Item>

    //         </Col>
    //       <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
    //      <Form.Item name="inputGrade" label="Input Grade" rules={[{ required: true, message: 'Missing Input Grade' }]}>
    //         <InputNumber style={{ width: '100%' }} min={0} onChange={calculateIssuingQty} disabled/>
    //       </Form.Item>

    //       </Col>


    //       <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
    //         <Form.Item name="physicalQuantity" label="Issuing Quantity" rules={[{ required: true, message: 'Missing Issuing Quantity' }]}>
    //           <InputNumber style={{ width: '100%' }} min={0} />
    //         </Form.Item>

    //       </Col>
    //       <Col span={4}>
    //             <Form.Item name="soakingStyle" label="Soaking Style" rules={[{ required: true, message: 'Missing Soaking Style' }]}>
    //               <Input style={{ width: '100%' }} disabled/>
                  
    //               {/* <Select
    //                 placeholder="Soaking Style"
    //                 allowClear
    //               >
    //                 <Option label={'soakingStyle'} value="STPP+SALT">STPP+SALT</Option>
    //                 <Option label={'soakingStyle'} value="Only SALT">Only SALT</Option>
    //                 <Option label={'soakingStyle'} value="NP + SALT">NP + SALT</Option>
    //                 <Option label={'soakingStyle'} value="CP + SALT"> CP + SALT</Option>
    //               </Select> */}
    //             </Form.Item>
    //           </Col>
    //        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
    //         <Form.Item name="soakingTime" label="Soaking Time (Min)" rules={[{ required: true, message: 'Missing Soaking Time' }]}>
    //           <InputNumber style={{ width: '100%' }} disabled/>
    //         </Form.Item>

    //       </Col>
    //      </Row>
    //      <Row>
    //       {/* <Col>
    //         <Form.Item style={{ paddingTop: '25px' }}>
    //           <Button type='primary' block onClick={onFinish}>
    //             Submit
    //           </Button>
    //         </Form.Item>
    //       </Col> */}
    //       <Col span={24} style={{ textAlign: 'right' }}>
          
    //         <Button type="primary"disabled={disable} onClick={onFinish} htmlType="submit" >
    //           Submit
    //         </Button>
    //         <Button htmlType="button" style={{ margin: '0 14px' }} onClick={onReset}>
    //             Reset
    //         </Button>
    //     </Col>

    //     </Row>
    //   </Form>
    // </Card>
    );
   
}
export default AssignTempSoakingMaterial;