import { ColumnProps } from "antd/lib/table"
import React, { useEffect, useState } from "react";
import {Badge, Button, Card, Col, Descriptions, Form, Input, Row, Select, Space, Tag} from 'antd'
import { MinusCircleOutlined , PlusOutlined} from '@ant-design/icons';
import { DefectsInfo, ReweighmentReq } from "@gtpl/shared-models/raw-material-procurement";
import { RMGrnService } from "@gtpl/shared-services/raw-material-procurement";
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { CompanyTypeEnum } from "@gtpl/shared-models/masters";
import AddDefects from '../../../raw-material-grn-form/src/lib/add-defects'
import { PassOrFail } from "@gtpl/shared-models/common-models";
export interface ReweighmwntProps{
  grnId:number;
  grnItemId:number
  reset: (any) => void
  // reweighmentBillTo : CompanyTypeEnum
  plantId : number
  index : number
  grnInfo : any
  vehicleNumber : string
  saleOrderId:number
  saleOrderItemId : number
  sealNumber:string
  reweighmentDate:Date
  supervisor:number
  antibioticTestResult : PassOrFail
}

const {Option} = Select

export const Reweighment = (props:ReweighmwntProps) => {
  const [page, setPage] = React.useState(1);
  const [form] = Form.useForm()
  const [totalQyt,setTotalQty] = useState<number>(0)
  const role = JSON.parse(localStorage.getItem('username'))
  const rmGrnService = new RMGrnService()
  const [defectsData,setDefectsData] = useState<any[]>([])
  const [tableData, setTableData] = useState<any[]>([]);
  console.log(props.grnId,props.grnItemId)
  const userName = localStorage.getItem("username");


  useEffect(()=>{
    setTableData([{'grnId':props.grnId,'grnItemId':props.grnItemId,'indentId':props.grnInfo.indentId}])
    form.resetFields()
  },[])


  // const columns : ColumnProps<any>[] = [
  //     {
  //       title: 'S No',
  //       key: 'sno',
  //       width: '70px',
  //       responsive: ['sm'],
  //       render: (text, object, index) => (page - 1) * 10 + (index + 1)
  //     },
  //     {
  //         title:'Boxes',
  //         dataIndex:'boxes'
  //     },
  //     {
  //         title:'Samole Quantity(In kGs)',
  //         dataIndex:'sampleQty'
  //     },
  //     {
  //         title:'Sample Pieces',
  //         dataIndex:'samplePieces'
  //     },
  //     {
  //         title:'Count',
  //         dataIndex:'count'
  //     },
  // ]

    const onFinish = (val) =>{
      console.log(val)
      if(props.reweighmentDate != undefined && props.vehicleNumber != undefined){
        console.log(defectsData,'===')
        let defects = []
        if(defectsData.length){
          defectsData.map(e => {
            return(defects.push(new DefectsInfo(e.defectId,e.indentItemId,Number(e.defectPercentage),Number(e.defectQuantity))))
          })
        }
        const req = new ReweighmentReq(props.grnId,props.grnItemId,val.boxes,val.sampleQty,val.samplePieces,val.count,val.countQuantityInfo,role,props.grnInfo.indentId,val.billTo,props.plantId,defects,val.batchNumber,null,props.grnItemId != null ? false : true,props.grnInfo.farmer,props.grnInfo.farmerCode,props.grnInfo.broker,props.grnInfo.harvestType,props.grnInfo.vehicleRequired,userName,props.vehicleNumber,props.saleOrderId,props.saleOrderItemId,props.sealNumber,props.reweighmentDate,props.supervisor,val.mainBatchNumber,props.antibioticTestResult)
        rmGrnService.createReweighmentInfo(req).then(res => {
          if(res.status){
            AlertMessages.getSuccessMessage(res.internalMessage)
            setDefectsData([])
            props.reset(props.index)
          }else{
            AlertMessages.getErrorMessage(res.internalMessage)
          }
        })
      }else{
        AlertMessages.getErrorMessage('Please fill all required fields!')
      }
      
    }

    // const onQtyChange = (e) => {
    //   console.log(e.target.value)
    //   const total = totalQyt + Number(e.target.value)
    //   console.log(total)
    //   setTotalQty(total)
    // }

    const onSampleQtyChange = (e) => {
      const pieces = form.getFieldValue('samplePieces') != undefined ? form.getFieldValue('samplePieces') : 0
      const count =Number(pieces) / Number(e.target.value)
      form.setFieldsValue({count:count})
    }

    const onSamplePiecesChange = (e) =>{
      const qty = form.getFieldValue('sampleQty') != undefined ? form.getFieldValue('sampleQty') : 0
      console.log(qty)
      const count = Number(e.target.value)/Number(qty)
      console.log(count)
      form.setFieldsValue({count:count})
    }

    return(
        // <Card>
            <Form layout="vertical" onFinish={onFinish} form={form}>
            {/* <Descriptions.Item>For Count</Descriptions.Item> */}
            <Badge.Ribbon text="For Count" color="volcano">
              <Card>
              <Row gutter={24}>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 5 }}>
            <Form.Item name='billTo' label='Bill To' rules={[{required:true,message:'Bill To is required'}]}>
              <Select showSearch allowClear optionFilterProp='children' placeholder='Select Bill To' dropdownMatchSelectWidth={false}>
                {Object.values(CompanyTypeEnum).map(e => {
                  return(
                    <Option key={e} value={e}>{e}</Option>
                  )
                })}
              </Select>
            </Form.Item>
            </Col>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 4 }}>
                <Form.Item name='batchNumber' label='Batch Number' rules={[{required:true,message:'Batch Number is required'}]}>
                <Input placeholder='Enter Batch Number'/>
                </Form.Item>
              </Col>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 4 }}>
                  <Form.Item label='No of Creates' name='boxes' rules={[{required: true ,message: 'Boxes required'},{pattern: /^[0-9]*$/,message: `Doesn't Allow letters and Spaces`}]}>
                      <Input placeholder="Enter No of creats"/>
                  </Form.Item>
              </Col>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 4 }}>
                  <Form.Item label='Sample Quantity In(KGs)' name='sampleQty' rules={[{required: true ,message: 'Sample Quantity required'},
                  // {pattern: /^[0-9]*$/,message: `Doesn't Allow letters and Spaces`}
                  ]}>
                      <Input onChange={onSampleQtyChange} placeholder="Enter Sample Quantity"/>
                  </Form.Item>
              </Col>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 4 }}>
                  <Form.Item label='Sample Pieces' name='samplePieces' rules={[{required: true ,message: 'Sample Pieces required'},{pattern: /^[0-9]*$/,message: `Doesn't Allow letters and Spaces`}]}>
                      <Input onChange={onSamplePiecesChange} placeholder="Enter Sample Pieces"/>
                  </Form.Item>
              </Col>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 4 }}>
                  <Form.Item label='Count' name='count' rules={[{required: true ,message: 'Count required'},
                  // {pattern: /^[0-9]*$/,message: `Doesn't Allow letters and Spaces`}
                ]}>
                      <Input placeholder="Enter Count"/>
                  </Form.Item>
              </Col>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 4 }}>
                <Form.Item name='mainBatchNumber' label='Main Batch Number' rules={[{required:true,message:'Main Batch Number is required'}]}>
                <Input placeholder='Enter Main Batch Number'/>
                </Form.Item>
              </Col>
              </Row>
              </Card>
            </Badge.Ribbon>
            {/* <Descriptions.Item>For Quantity</Descriptions.Item> */}
            <Row>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 24 }}>
              <Badge.Ribbon text="For Quantity" color='volcano'>
                <Card>
                {/* <Row gutter={24}> */}
                  <Form.List name="countQuantityInfo" initialValue={[{}]}>
                    {(fields, { add, remove }) => (
                      
                      <>
                      <Form.Item>
                          <Button type="dashed" style={{ backgroundColor: 'darkseagreen' }} onClick={() => add()} block icon={<PlusOutlined />}>
                              Add 
                          </Button>
                        </Form.Item>
                        <Row gutter={24} style={{marginLeft:'0.3%'}}>
                        {fields.map(({ key, name, ...restField }) => (
                          <Space
                            key={key}
                            style={{ display: 'flex' }}
                          >

                            <Form.Item
                              {...restField}
                              name={[name, 'count']}
                              label={name>0 ? "Boxes"+ - +name : "Boxes"}
                              rules={[
                                { 
                                  required: true ,
                                  message: 'Boxes required',
                                  
                                },
                              ]}
                            >
                              <Input
                                placeholder="Enter Boxes"
                                // width={}
                                type="number"
                              />
                            </Form.Item>
                            <Form.Item
                              {...restField}
                              name={[name, 'quantity']}
                              label={name>0 ? "Quantity"+ - +name : "Quantity"}
                              rules={[
                                { 
                                  required: true ,
                                  message: 'Quantity required',
                                  
                                },
                              ]}
                            >
                              <Input
                              // onChange={onQtyChange}
                               placeholder="Enter Quantity"
                                // width={130}
                                type="number"
                              />
                            </Form.Item>
                            {fields.length > 1 && (
                            <MinusCircleOutlined onClick={() =>{ remove(name)}} />)}
                          </Space>
                        ))}
                        </Row>
                      </>
                    )}
                  </Form.List>

                {/* </Row> */}
                </Card>
              </Badge.Ribbon>
              
              </Col>
            </Row>
            <Row>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 24 }}>
              <Badge.Ribbon text="Defects" color='volcano'>
                  <AddDefects indentItemId={props.grnInfo.indentItemId} setTableData={(values) => setDefectsData(values)} initialValues={tableData}/>
              </Badge.Ribbon>
              </Col>
            </Row>
            {/* <Tag color="green">Total Quantity: {totalQyt}</Tag> */}
            <Row justify="end">
              <Button type='primary' htmlType="submit">Submit</Button>
            </Row>
            </Form>

        // </Card>
    )


}

export default Reweighment