import { GlobalVariableValues, UserRequestDto } from "@gtpl/shared-models/common-models";
import { CategoryItemReq, FgPriceListCategoryEnum, GetValueAdditionDataBySkuCodesRequest, PackingMethodDto, ProductAndCategoryReq, ProductPackStyleReq, SizesDropDownDto, SkuDto } from "@gtpl/shared-models/masters";
import { CategoriesInput, PackTypeCategory, UnitsOfWeightInput } from "@gtpl/shared-models/sale-management";
import { EndCustomersService, FgPriceListService, FoodTypeService, GradeServices, PackingMaterialPriceService, PackingMethodService, ProductService, SizesService, SkuService, TypeofValueAddition4Service, UomsService } from "@gtpl/shared-services/masters";
import { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import { Button, Card, Col, Divider, Form, Input, InputNumber, Popconfirm, Radio, Row, Select, Table, Tag, Tooltip } from "antd"
import React, { useEffect, useState } from "react"
import { EditOutlined, MinusCircleOutlined } from '@ant-design/icons';
import { ColumnProps } from "antd/lib/table";
import { format } from "url";
import { OrderTypeEnum } from "@gtpl/shared-models/enquiry-management";
import { EnquiriesService } from "libs/shared-services/enquiry-management/src/lib/enquiries-service";

export interface InQuiryProductFormProps{
  endCustomerId:number
  productDetails:any;
  // updateDetails:any
  enquiryId:number
  country : number
}
export function InQuiryProductForm(props:InQuiryProductFormProps){
    const [itemsForm] = Form.useForm()
    const {Option} = Select
    let categories = CategoriesInput;
    let netCaseWeight =0 
    let netWeight = 0
    let netAmount = 0
    let category
    // let label ='Unit Price'

    const [brandsData, setBrandsData] = useState<any>([])
    const [skucodes, setSkucode] = useState<SkuDto[]>([]);
    const [packingMethods, setPackingMethods] = useState<any[]>([]);
    const [sizes, setSizes] = useState<any[]>([]);
    const [tableData, setTableData]= useState<any[]>([])
    const [defaultFormData, setDefaultFormData] = useState<any>([])
    const [isUpdate, setIsUpdate] = useState<boolean>(false)
    const [indexval, setIndexval]=useState(undefined)
    const [priceLabel, setPriceLabel] = useState<string>('');
    const [gradeData, setGradeData] = useState<any>([]);
    const [enqUpdateData, setEnqUpdateData] = useState([])
    const skuService = new SkuService();
    const pmService = new PackingMethodService();
    const uomsService = new UomsService();
    const sizeService = new SizesService();
    const endCustomerService = new EndCustomersService()
    const gradeService = new GradeServices()
    const enquiryService = new EnquiriesService()
    const packingMaterialPriceService = new PackingMaterialPriceService()
    const [uvPrice,setUvPrice] = useState<boolean>(false)
    let itemData : any[] = []
    const priceListService = new FgPriceListService()
    const [varietyRequired,setVarietyRequired] = useState<boolean>(false)


    useEffect(() =>{
        getSkuCodes()
        getPackingMethods()
        itemsForm.setFieldsValue({unitPrice:0})
    },[])

    useEffect(() =>{
    if(props.enquiryId != 0){
      getEnquiryDetailsById(props.enquiryId)
    }
    },[props.enquiryId])

    useEffect(() => {
      if(props.country){
        props.country == GlobalVariableValues.USACountryId || props.country == GlobalVariableValues.CANADACountryId ? itemsForm.setFieldsValue({'priceBasedOn' :'LBS'}) : itemsForm.setFieldsValue({'priceBasedOn' :'KGS'})
      }
    },[props.country])


    const getPriceAgainstProductPackStyle = (productId,packstyleId) => {
      const req = new ProductPackStyleReq(productId,packstyleId)
      packingMaterialPriceService.getPriceAgainstProductPackStyle(req).then(res => {
        if(res.status){
          itemsForm.setFieldsValue({packMaterialCost: Math.round(res.data[0].price)})
        }else{

          itemsForm.setFieldsValue({packMaterialCost: undefined})
        }
      })
    }

    const getEnquiryDetailsById = (enquiryId) =>{
      enquiryService.getAllEnquiryDetailsById({enquiryid:enquiryId}).then(res =>{
        if(res.status){
          setTableData(res?.data[0]?.productDetails)
          setEnqUpdateData(res.data)
          props.productDetails(res?.data[0]?.productDetails)
        }else{
          setEnqUpdateData([])
        }
      })
    }

    useEffect(() =>{
      getBrandAgainstEndCustomer(props.endCustomerId)
    },[props.endCustomerId])
    
     const getSizes = (subCatId) => {
        sizeService.getSizeByItemSubCategory({itemSubcatId:subCatId}).then((res) => {
          if (res.status) {
            setSizes(res.data);
          } else {
            setSizes([]);
          }
        }).catch((err) => {
          AlertMessages.getErrorMessage(err.message);
          setSizes([]);
        });
      }
      const getBrandAgainstEndCustomer = (encustomerId) =>{
        endCustomerService.getBrandsForEndCustomerId({endCustomerId:encustomerId}).then(res =>{
          if(res.status){
            res.data.push({'masterBrandId':GlobalVariableValues.masterNABrandId,'brandId':GlobalVariableValues.NAbrandId,'brandName':'N/A'})
            setBrandsData(res.data)
          }else{
            setBrandsData([])
          }
        }) 
      }

     const getSkuCodes = () => {
        skuService.getActiveSkuCodes().then((res) => {
          if (res.status) {
            setSkucode(res.data);
          }
          else {
            setSkucode([]);
          }
        })
          .catch((err) => {
            AlertMessages.getErrorMessage(err.message);
            setSkucode([]);
          });
      }

      const getPackingMethods = () => {
        pmService.getPackingmethods().then((res) => {
          if (res.status) {
            setPackingMethods(res.data);
          }
          else {
            setPackingMethods([]);
          }
        })
          .catch((err) => {
            AlertMessages.getErrorMessage(err.message);
            setPackingMethods([]);
          });
      }

      const getPackCountByGradeId=(value)=>{
        gradeService.getGradeById({gradeId:value}).then((res)=>{
          if(res.data){
            setGradeData([res.data])
          }
        })
      }
      useEffect(()=>{
        if(gradeData){
          itemsForm.setFieldsValue({packCount: gradeData[0]?.packCount})
        }
      },[gradeData])

      const setEditForm =(rowData:any,index) =>{
        console.log(rowData,'================')
        if(rowData.uvPrice == true || rowData.uvPercentOrCent != null){
          setUvPrice(true)
          rowData.uvPrice = true
        }else{
          setUvPrice(false)
          rowData.uvPrice = false
        }
        if(rowData.category == 'Pouch' || rowData.category == 'Nobashi'){
          setVarietyRequired(false)
        }else{
          setVarietyRequired(true)
        }
        setDefaultFormData(rowData)
        setIsUpdate(true)
        setIndexval(index)
      }

      const deleteData = (index:any) =>{
        itemData=[...tableData]
        itemData.splice(index,1)
        setTableData(itemData)
        props.productDetails(itemData)
      }

      useEffect(() =>{
        if(defaultFormData){
          console.log(defaultFormData)
          itemsForm.setFieldsValue({brandId:defaultFormData.brandId})
          itemsForm.setFieldsValue({brandName:defaultFormData.brandName})
          itemsForm.setFieldsValue({category:defaultFormData.category})
          itemsForm.setFieldsValue({variantId:defaultFormData.variantId})
          itemsForm.setFieldsValue({variantName:defaultFormData.variantName})
          itemsForm.setFieldsValue({packstyleId:defaultFormData.packStyleId})
          itemsForm.setFieldsValue({packStyleName:defaultFormData.packStyleName})
          itemsForm.setFieldsValue({ styleWeighment:defaultFormData. styleWeighment})
          itemsForm.setFieldsValue({ unitPrice:defaultFormData.unitPrice})
          itemsForm.setFieldsValue({ noOfCases:defaultFormData.noOfCases})
          itemsForm.setFieldsValue({ caseWeight:defaultFormData.caseWeight})
          itemsForm.setFieldsValue({ netWeight:defaultFormData.netWeight})
          itemsForm.setFieldsValue({ netAmount:defaultFormData.netAmount})
          itemsForm.setFieldsValue({ noOfSkewers:defaultFormData.noOfSkewers})
          itemsForm.setFieldsValue({ varietyId:defaultFormData.varietyId})
          itemsForm.setFieldsValue({ varietyName:defaultFormData.varietyName})
          itemsForm.setFieldsValue({ shrimpWeight:defaultFormData.shrimpWeight})
          itemsForm.setFieldsValue({packCount: defaultFormData.packCount})
          itemsForm.setFieldsValue({orderType: defaultFormData.orderType})
          itemsForm.setFieldsValue({enquiryProductId:defaultFormData.enquiryProductId})
          itemsForm.setFieldsValue({uomId:defaultFormData.uomId})
          itemsForm.setFieldsValue({pouchePerRow:defaultFormData.pouchePerRow})
          itemsForm.setFieldsValue({pouches:defaultFormData.pouches})
          itemsForm.setFieldsValue({uomName:defaultFormData.uomName})
          itemsForm.setFieldsValue({packMaterialCost : defaultFormData.packMaterialCost})
          itemsForm.setFieldsValue({uvPrice: defaultFormData.uvPrice})
          itemsForm.setFieldsValue({uvPriceCategory: defaultFormData.uvPriceCategory})
          itemsForm.setFieldsValue({uvPercentOrCent: defaultFormData.uvPercentOrCent})
          itemsForm.setFieldsValue({uvType: defaultFormData.uvType})
          itemsForm.setFieldsValue({brandType: defaultFormData.brandType})
          itemsForm.setFieldsValue({priceBasedOn : defaultFormData.priceBasedOn})
        }
      },[defaultFormData])

      // useEffect(()=>{
      //   if(props?.updateDetails){
      //     setTableData(props?.updateDetails)
      //   }
      // },[props?.updateDetails])

      useEffect(()=>{
      },[tableData])

      const updateColumns :ColumnProps<any>[] = [
        {
          title: 'Order Type',
          dataIndex: 'orderType',
        },
        {
          title: 'Category',
          dataIndex: 'category',
        },
        {
          title: 'Brand',
          dataIndex: 'brandName', 
        },
        {
          title: 'Product',
          dataIndex: 'variantName',
        },
        {
          title: 'Pack Count',
          dataIndex: 'packCount',
        },
        {
          title: 'Pack Style',
          dataIndex: 'packStyleName',
        },
        {
          title: 'Pack Material Cost',
          dataIndex: 'packMaterialCost',
        },
        {
          title:'Style Weighment',
          dataIndex:'styleWeighment'
        },
        {
          title:'UB Percent/Cents',
          dataIndex:'uvPercentOrCent'
        },
        {
          title:'Price Based On',
          dataIndex:'priceBasedOn'
        },
        {
          title: 'Unit Price',
          dataIndex: 'unitPrice',
          key: 'unitPrice',
        },
        {
          title: 'Net Shrimp Weight',
          dataIndex: 'shrimpWeight',
          key: 'shrimpWeight',
        },
        {
          title: 'No Of Cases',
          dataIndex: 'noOfCases',
          key: 'noOfCases',
        },
        {
          title: 'Net Case Weight',
          dataIndex: 'caseWeight',
          key: 'caseWeight',
        },
        {
          title: 'Net Weight',
          dataIndex: 'netWeight',
          key: 'netWeight',
        },
        {
          title: 'Net Amount',
          dataIndex: 'netAmount',
          key: 'netAmount',
        },
        {
          title: 'Skewers',
          dataIndex: 'noOfSkewers',
          key: 'noOfSkewers',
        },
        {
          title: 'Variety',
          dataIndex: 'varietyName',
          key: 'varietyName',
        },
        {
          title: 'Action',
          dataIndex: 'action',
          render: (text, rowData: any, index) => (
            <span>
              <Tooltip placement="top" title='edit'>
                <EditOutlined className={'editSamplTypeIcon'} type="edit"
                  onClick={() => {
                    if (rowData) {
                    setEditForm(rowData, index);
                    }
                  }}
                  style={{ color: '#1890ff', fontSize: '14px' }}
                />
              </Tooltip>
              {
                <><Divider type="vertical" />
                  <Tooltip placement="top" title='delete'>
                         <Tag >
                        <Popconfirm title='Sure to delete?' onConfirm={e =>{deleteData(index);}}>
                        <MinusCircleOutlined 

                        style={{ color: '#1890ff', fontSize: '14px' }} />
                        </Popconfirm>
                    </Tag>
                  </Tooltip>
                </>
              }
            </span>)
        },
      ]

      const brandOnchange = (value,option) =>{
        console.log(option,'========')
        // console.log(option.name)
        // if(itemsForm.getFieldValue('brandType') != 'new'){
          itemsForm.setFieldsValue({brandName:option.name})
        // }else{
        //   itemsForm.setFieldsValue({brandName:'N/A'})
        // }
      }

      const variantOnchange =(value,option) =>{
        getPriceAgainstProductPackStyle(value,itemsForm.getFieldValue('packstyleId'))
        itemsForm.setFieldsValue({variantName:option.name})
        getPackCountByGradeId(option?.gradeId)
        getMinAndMaxGlaze(value)
      }

      const getMinAndMaxGlaze = (val) => {
        skuService.getValueAdditionDataBySkuCode(new GetValueAdditionDataBySkuCodesRequest(val)).then((res) => {
          if (res.status) {
            itemsForm.setFieldsValue({'minGlaze':res.data.minglaze,'maxGlaze' : res.data.maxglaze})
          }else {
              AlertMessages.getErrorMessage(res.internalMessage)
          }
        })
      }
      const categoeyOnchange = (value,option) =>{
        if(value == 'Pouch' || value == 'Nobashi'){
          setVarietyRequired(false)
        }else{
          setVarietyRequired(true)
        }
        getSizes(option.catid) 

        if(isUpdate){
          calCulateWeightAndPrice()
        }else{
          calCulateWeightAndPrice()
        }
      }
      const PackStyleOnchange =(value, option)=>{
        console.log(option)
        getPriceAgainstProductPackStyle(itemsForm.getFieldValue('variantId'),value)
        itemsForm.setFieldsValue({shrimpWeight:option?.pouchePerRow})
        itemsForm.setFieldsValue({pouchePerRow:option?.pouchePerRow})
        itemsForm.setFieldsValue({pouches:option?.pouches})
        itemsForm.setFieldsValue({uomId:option.uomId})
        itemsForm.setFieldsValue({packStyleName:option.name})
        itemsForm.setFieldsValue({uomName:option.uomName})
    
        if(isUpdate){
          calCulateWeightAndPrice()
        }else{
        calCulateWeightAndPrice()
        }
      }

      const varietyOnchange = (value, option) =>{
        itemsForm.setFieldsValue({varietyName:option.name})
      }

      const noOfCasesOnchange = (e) =>{
        if(isUpdate){
          calCulateWeightAndPrice()
        }else{
        calCulateWeightAndPrice()
        }
      }

      const calCulateWeightAndPrice = () =>{

        if(itemsForm.getFieldValue('category') != undefined && itemsForm.getFieldValue('noOfCases') && itemsForm.getFieldValue('packstyleId') != undefined && itemsForm.getFieldValue('unitPrice') != undefined){

          const packStyleUom = itemsForm.getFieldValue('uomName')
          const uom = itemsForm.getFieldValue('priceBasedOn')
          const pouches = itemsForm.getFieldValue('pouches')
          const PoucheperRow = itemsForm.getFieldValue('pouchePerRow')
          const unitPrice  = itemsForm.getFieldValue('unitPrice')
          const cases = itemsForm.getFieldValue('noOfCases')
          category= itemsForm.getFieldValue('category')
          let weight 
          let caseWeight
          if(category == 'Skewers' || category == 'Pouch'){

            if(packStyleUom == 'LBS' || packStyleUom == 'KGS'){
              caseWeight=Number(pouches)* Number(PoucheperRow)
              weight = Number(caseWeight)*Number(cases)
            }
              if(packStyleUom == 'OZ'){
                setPriceLabel('(Per LB)')
                caseWeight= Number(pouches)* Number(PoucheperRow)/16
                weight = Number(caseWeight)*Number(cases)
                // netAmount=Number(unitPrice)* Number(netWeight)
              }
              if(packStyleUom == 'GMS'){
                setPriceLabel('(Per KG)')
                caseWeight = Number(pouches)* Number(PoucheperRow)/1000
                weight=Number(caseWeight) * Number(cases)
                // netAmount =Number(netWeight) * Number(unitPrice)
              }

              if(uom == 'LBS' || uom == 'KGS'){
                setPriceLabel('(Per '+uom+')')   
                let caseWeighInKgs
                let caseWeightinLbs
                if(packStyleUom == 'LBS' || packStyleUom == 'OZ'){
                  caseWeighInKgs = caseWeight * 0.454
                  caseWeightinLbs = caseWeight
                } else if(packStyleUom == 'KGS' || packStyleUom == 'GMS'){
                  caseWeighInKgs = caseWeight
                  caseWeightinLbs = caseWeight / 0.454
                } 
                // netCaseWeight=Number(pouches)* Number(PoucheperRow)
                if(uom == 'LBS'){
                  netCaseWeight = caseWeightinLbs
                }else if(uom == 'KGS'){
                  netCaseWeight = caseWeighInKgs
                }
                netWeight = Number(netCaseWeight)*Number(cases)
                netAmount = Number(netWeight)*Number(unitPrice)
              }
          }else{
            setPriceLabel('(Per Unit)')
            // if(uom == 'LBS' || uom == 'KGS'){
  
            // netCaseWeight=Number(pouches)* Number(PoucheperRow)
            // netWeight = Number(netCaseWeight)*Number(cases)
            // netAmount = Number(pouches)*Number(unitPrice) * Number(cases)
            // }

            
            if(packStyleUom == 'LBS' || packStyleUom == 'KGS'){
              caseWeight=Number(pouches)* Number(PoucheperRow)
              weight = Number(caseWeight)*Number(cases)
            }
            if(packStyleUom == 'OZ'){
              caseWeight= Number(pouches)* Number(PoucheperRow)/16
              weight = Number(caseWeight)*Number(cases)
              // netAmount = Number(pouches)*Number(unitPrice) * Number(cases)
            }
            if(packStyleUom == 'GMS'){
              caseWeight = Number(pouches) * Number(PoucheperRow) /1000
              weight = Number(caseWeight)*Number(cases)
              // netAmount = Number(pouches)*Number(unitPrice) * Number(cases)
            }

            if(uom == 'LBS' || uom == 'KGS'){
              let caseWeighInKgs
              let caseWeightinLbs
              if(packStyleUom == 'LBS' || packStyleUom == 'OZ'){
                caseWeighInKgs = caseWeight * 0.454
                caseWeightinLbs = caseWeight
              } else if(packStyleUom == 'KGS' || packStyleUom == 'GMS'){
                caseWeighInKgs = caseWeight
                caseWeightinLbs = caseWeight / 0.454
              } 
              // netCaseWeight=Number(pouches)* Number(PoucheperRow)
              if(uom == 'LBS'){
                netCaseWeight = caseWeightinLbs
              }else if(uom == 'KGS'){
                netCaseWeight = caseWeighInKgs
              }
              netWeight = Number(netCaseWeight)*Number(cases)
              netAmount = Number(netWeight)*Number(unitPrice)
            }
            
          }
          itemsForm.setFieldsValue({caseWeight:String(caseWeight.toFixed(3))})
          itemsForm.setFieldsValue({netWeight:String(weight.toFixed(3))})
          itemsForm.setFieldsValue({netAmount:String(netAmount.toFixed(3))})
        }else{
          itemsForm.setFieldsValue({caseWeight:String(0)})
          itemsForm.setFieldsValue({netWeight:String(0)})
          itemsForm.setFieldsValue({netAmount:String(0)})
        }
      }

      const onAdd =(values) =>{
        console.log(values)
        values.grouping = defaultFormData.grouping
        values.noOfContainers = defaultFormData.noOfContainers
        itemsForm.validateFields().then(res =>{
          if(indexval !== undefined){
            tableData[indexval] = values
            itemData=[...tableData]
            setIndexval(undefined)
            setIsUpdate(false)
            // itemsForm.resetFields()
          }else{
            itemData =[...tableData,values]
            // itemsForm.resetFields()
          }
            setTableData(itemData)
            props.productDetails(itemData)
        })
      }

     const  onReset = () =>{
      itemsForm.resetFields()
     }
     const unitPriceOnchange = () =>{
      if(isUpdate){
        calCulateWeightAndPrice()
      }else{
      calCulateWeightAndPrice()
      }
     }

     const onRadioButtonChange = (e) => {
      console.log(e.target.value)
      if(e.target.value){
        setUvPrice(true)
      }else{
        setUvPrice(false)
      }
    }

    const onPercentChange = (e) => {
      const req = new ProductAndCategoryReq(itemsForm.getFieldValue('variantId'),FgPriceListCategoryEnum.UB)
      priceListService.getProductPriceByProductAndCategory(req).then(res => {
        if(res.status){
          itemsForm.setFieldsValue({uvProductPrice:res.data[0].price})
          const priceCategory = itemsForm.getFieldValue('uvPriceCategory')
          let productPrice
          if(priceCategory == 'minPrice'){
            productPrice = res.data[0].minPrice
          }else if(priceCategory =='midPrice'){
            productPrice = res.data[0].midPrice
          }else{
            productPrice = res.data[0].highPrice
          }
          const percentValue = Number(productPrice) * (Number(itemsForm.getFieldValue('uvPercentOrCent')) / 100)
          let buyerPrice
          if(itemsForm.getFieldValue('uvType') == 'percent'){
            buyerPrice = Number(productPrice) - percentValue
          }else{
            buyerPrice = Number(productPrice) - Number(itemsForm.getFieldValue('uvPercentOrCent'))
          }
          itemsForm.setFieldsValue({unitPrice : buyerPrice})
        }else{
          AlertMessages.getErrorMessage('UB Price does not exist against product')
        }
      })
    }

  const brandTypeOnchange = (val) => {
    if(val == 'new'){
      itemsForm.setFieldsValue({brandId:GlobalVariableValues.NAbrandId})
      itemsForm.setFieldsValue({brandName:'N/A'})
    }
  }

  const onStyleWeighmentChange = (val) => {
    if(val == 'FWFC' || val == 'FWNC'){
  
      const minGlaze = Number(itemsForm.getFieldValue('minGlaze'))
      const maxGlaze = Number(itemsForm.getFieldValue('maxGlaze'))
      console.log(minGlaze,minGlaze,'glaze')
      const avg = (minGlaze+maxGlaze)/2
      const pouchWt = Number(itemsForm.getFieldValue('pouchePerRow'))
      console.log(pouchWt)
      console.log(avg)
      const finalntwt = Number(pouchWt-(avg/100*pouchWt)).toFixed(2)
      console.log(finalntwt)
      itemsForm.setFieldsValue({shrimpWeight:Number(finalntwt)})
    }else{
      itemsForm.setFieldsValue({shrimpWeight:Number(itemsForm.getFieldValue('pouchePerRow'))})
    }
  }


return (
    <Card title={<span style={{ color: 'white' }}>Product Details</span>} style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}>
        <Form form={itemsForm} layout="vertical" autoComplete="off" onFinish={onAdd}>
          <Form.Item name={'enquiryProductId'} hidden><Input/></Form.Item>
          <Form.Item name={'minGlaze'} hidden><Input/></Form.Item>
          <Form.Item name={'maxGlaze'} hidden><Input/></Form.Item>
            <Row gutter={24}>
            <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item name={'orderType'} label={'Order Type'}
            rules={[{required:true,message:'Order Type Is Required'}]}
            >
              <Select placeholder='Select Order Type' allowClear showSearch
              >
               {Object.values(OrderTypeEnum).map((key,value) =>{
                return <Option key={key} value={key}>{key}</Option>
               })}
              </Select>
            </Form.Item>
          </Col>
            <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item name="category" label="Category" rules={[{ required: true, message: 'Missing category' }]}>
                  <Select
                    showSearch
                    optionFilterProp="children"
                    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    placeholder="Select Category"
                    allowClear
                    onChange={categoeyOnchange}
                  >
                    {categories.map(catdropData => {
                      return <Option label={'category'} catid={catdropData.id} value={catdropData.name}>{catdropData.name}</Option>
                    })}
                  </Select>
                </Form.Item>
             </Col>
             <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item label="Brand Type"
                  name={'brandType'}
                  // rules={[{ required: true, message: 'Missing Brand Type' }]}
                >
                  <Select
                    showSearch
                    optionFilterProp="children"
                    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    placeholder="Select Brand Type"
                    onChange={brandTypeOnchange}
                    allowClear
                  >
                    <Option key='old' value='old'>Old</Option>
                    <Option key='new' value='new'>New</Option>
                  </Select>
                </Form.Item>
                {/* <Form.Item name={'brandName'} hidden><Input/></Form.Item > */}
            </Col>
            <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item label="Brand"
                  name={'brandId'}
                  // rules={[{ required: true, message: 'Missing Brand name' }]}
                >
                  <Select
                    showSearch
                    optionFilterProp="children"
                    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    placeholder="Select Brand"
                    onChange={brandOnchange}
                    allowClear
                  >
                    {brandsData.map(branddropData => {
                      return <Option  masterBrandId={branddropData.masterBrandId} key={branddropData.brandId} value={branddropData.brandId} name={branddropData.brandName}>{branddropData.brandName}</Option>
                    })}
                  </Select>
                </Form.Item>
                <Form.Item name={'brandName'} hidden><Input/></Form.Item >
            </Col>
            <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item label="Product"
                  name={'variantId'}
                  rules={[{ required: true, message: 'Missing Variant Code' }]}
                >
                  <Select
                    showSearch
                    optionFilterProp="children"
                    // filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    placeholder="Select Product Code"
                    allowClear
                    dropdownMatchSelectWidth={false}
                    onChange={variantOnchange}
                  >
                    {skucodes.map(skudropData => {
                      return (
                      <Option className={'stylesInfo'} label={'varientId'} 
                      key={skudropData.skuCodeId} value={skudropData.skuCodeId} name={skudropData.shortCode} gradeId={skudropData.gradeId}>
                        {skudropData.shortCode}
                      </Option>)
                    })}
                  </Select>
                </Form.Item>
                <Form.Item name={'variantName'} hidden><Input/></Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item label="Pack Count"
                  name={'packCount'}
                  rules={[{ required:true,message: 'Missing Pack Count' }]}
                >
                  <Input  placeholder="Pack Count"  />
                </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item label="Pack Style" required name={'packstyleId'}
             rules={[{ required:true,message: 'Missing Pack Style' }]}
            >
                  <Select
                    showSearch
                    optionFilterProp="children"
                    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    placeholder="Select Packing Method"
                    allowClear
                    onChange={PackStyleOnchange}
                  >
                    {packingMethods.map(skudropData => {
                      return <Option  key={skudropData.packingMethodId} value={skudropData.packingMethodId} name={skudropData.packingMethodName} pouches={skudropData.noOfPouches} uomName={skudropData.uomName} pouchePerRow={skudropData.pouchesPerRow} uomId={skudropData.uomId} >{skudropData.packingMethodName}</Option>
                    })}
                  </Select>
                </Form.Item>

                <Form.Item name={'pouchePerRow'} hidden><Input/></Form.Item>
                <Form.Item name={'pouches'} hidden><Input/></Form.Item>
                <Form.Item name={'uomId'} hidden><Input/></Form.Item>
                <Form.Item name={'packStyleName'} hidden><Input/></Form.Item>
                <Form.Item name={'uomName'} hidden><Input/></Form.Item>

            </Col>
            <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item label="Pack Material Cost"
                  name={'packMaterialCost'}
                  rules={[{ required:true,message: 'Missing Pack Material Price' }]}
                >
                  <Input  placeholder="Pack Material Price"  />
                </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item name="styleWeighment" label="Style Weighment" rules={[{ required: true, message: 'Missing Style Weighment' }]}>
                  <Select
                    placeholder="Weighment"
                    allowClear
                    onChange={onStyleWeighmentChange}
                  >
                    <Option label="styleWeighment" value="NWNC">NWNC</Option>
                    <Option label="styleWeighment" value="NWFC">NWFC</Option>
                    <Option label="styleWeighment" value="FWNC">FWNC</Option>
                    <Option label="styleWeighment" value="FWFC">FWFC</Option>
                  </Select>
                </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6} xl={4}>
              <Form.Item label='UB Price' name='uvPrice' rules={[{ required: true, message: 'Missing UB Price' }]}>
              <Radio.Group onChange={onRadioButtonChange}>
              <Radio value={true}>Yes</Radio>
              <Radio value={false}>No</Radio>
              </Radio.Group>
              </Form.Item>
            </Col>
            {
              uvPrice ? (<>
              <Col xs={24} sm={12} md={8} lg={6} xl={4}>
              <Form.Item label='Price Category' name='uvPriceCategory' rules={[{ required: true, message: 'Missing UB Price Category type' }]}>
                <Select allowClear showSearch optionFilterProp="children" placeholder='Select Price Category'>
                  <Option key='minPrice' value='minPrice'>Min Price</Option>
                  <Option key='midPrice' value='midPrice'>Mid Price</Option>
                  <Option key='highPrice' value='highPrice'>High Price</Option>
                </Select>
              </Form.Item>
              </Col>
              <Col xs={24} sm={12} md={8} lg={6} xl={4}>
              <Form.Item name='uvType' label='UB Type' rules={[{ required: true, message: 'Missing UB type' }]}>
              {/* <Radio.Group style={{marginRight:'2%'}}>
                <Radio value={'percent'}>percent</Radio><br/>
                <Radio value='cent'>{'cent   '  }</Radio>
              </Radio.Group> */}
              <Select allowClear showSearch optionFilterProp="children" placeholder='Select UB Type'>
                <Option key='percent' value='percent'>Percent</Option>
                <Option key='cents' value='cents'>Cents</Option>
              </Select>
              </Form.Item>
              </Col>
              <Col xs={24} sm={12} md={8} lg={6} xl={4}>
              <Form.Item name='uvPercentOrCent' label='Percent/Cent'  rules={[{ required: true, message: 'Missing Percent/Cent' }]}>
                <Input placeholder="Enter Percent" onBlur={onPercentChange}/>
              </Form.Item>
              <Form.Item name='uvProductPrice' style={{display:'none'}}>
                <Input disabled/>
              </Form.Item>
              </Col>
              </>) : (<></>)
            }
             <Col xs={24} sm={12} md={8} lg={6} xl={4}>
                <Form.Item label='Price Based On' name='priceBasedOn' initialValue={props.country == GlobalVariableValues.USACountryId || props.country == GlobalVariableValues.CANADACountryId ? 'LBS' : 'KGS'} rules={[{required:true,message:'Price Based On is required'}]}>
                <Radio.Group defaultValue={props.country == GlobalVariableValues.USACountryId || props.country == GlobalVariableValues.CANADACountryId ? 'LBS' : 'KGS'} 
                
                onChange={calCulateWeightAndPrice}
                  >
                    <Radio key='1' value={'KGS'}>KG</Radio>
                    <Radio key='2' value={'LBS'}>LB</Radio>
                  </Radio.Group>
                </Form.Item>
                </Col>
             <Col xs={24} sm={12} md={8} lg={6} xl={4}>
             <Form.Item label={priceLabel?`Buyer Offer Price${priceLabel}`:'Buyer Offer Price'}
                  name={'unitPrice'}
                  rules={[{ required: true, message: 'Missing Buyer Offer Price ' },
                  {
                    pattern: /^[0-9]*\.?[0-9]*$/,
                    message: `Letters , Spaces and Special charecters are not aloowed`,
                  },
                ]}
                  initialValue={0}
                >
                  <Input  placeholder="Buyer Offer Price" style={{ width: '100%' }} min={0} onChange={unitPriceOnchange} defaultValue={0}/>
                </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item label="Net Shrimp Weight"
                  name={'shrimpWeight'}
                  rules={[{ required: true, message: 'Missing Net Shrimp Weight' }]}
                >
                  <Input placeholder="Net Shrimp Weight" 
                   />
                </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item label="No. Of Cases"
                  name={'noOfCases'}
                  rules={[{ required: true, pattern: /^[0-9]*$/, message: 'Missing cases/can not allow Decimals' }]}
                >
                  <InputNumber placeholder="Cases"
                   onChange={e => noOfCasesOnchange(e)} 
                   style={{ width: '100%' }} />
                </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item label="Net Case Weight"
                  name={'caseWeight'}
                  rules={[{ required:true,message: 'Missing Net Case Weight' }]}
                >
                  <Input  placeholder="Net Case Weight" 
                  disabled 
                  />
                </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item label="Net Weight"
                  name={'netWeight'}
                  rules={[{required:true, message: 'Missing Net Weight' }]}
                >
                  <Input placeholder="Net weight" 
                   disabled />
                </Form.Item>

            </Col>
            <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item label="Net Amount"
                  name={'netAmount'}
                  rules={[{required:true, message: 'Missing Net Amount' }]}
                >
                  <Input  placeholder="Net Amount"
                   disabled />
                </Form.Item>
              </Col>
                <Col xs={24} sm={12} md={8} lg={6} xl={4} style={{display:itemsForm.getFieldValue('category') === 'Skewers'?'unset':'none'}} >
                <Form.Item label="Skewers"
                name={'noOfSkewers'}
                rules={[{ required:itemsForm.getFieldValue('category') === 'Skewers' ? true:false , message: 'Missing Skewers' }]}
                >
                <InputNumber style = {{width:'100%'}} placeholder="Skewers" 
                min={0}/>
                </Form.Item>
                </Col>
          {
            varietyRequired ? (<>
             <Col xs={24} sm={12} md={8} lg={6} xl={4} style={{display:itemsForm.getFieldValue('category') === 'Pouch'?'none':'unset'}} >
             <Form.Item label="Variety"
                   name={'varietyId'}
                   rules={[{required:varietyRequired,message:'Variety is required'}]}
                 >
                   <Select
                     showSearch
                     optionFilterProp="children"
                     filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                     placeholder="Select Variety"
                     allowClear
                     onChange={varietyOnchange}
                   >
                     {sizes.map(dropData => {
                       return <Option  key={dropData.sizeId} value={dropData.sizeId} name={dropData.sizeName}>{dropData.sizeName}</Option>
                     })}
                  </Select>
                 </Form.Item>
                 <Form.Item name={'varietyName'} hidden><Input/></Form.Item>
             </Col>
            
            </>) : (<></>)
          }

            </Row>
            <Row justify="end">
              <Col span={2}>
              <Button type="primary"  htmlType="submit" >{isUpdate ?'Update':'Add'}</Button>
              </Col>
              <Col span={2}>
              <Button danger onClick={onReset} >{'Reset'}</Button>
              </Col>
            </Row>   
        </Form>
        {
          tableData?.length >0?
          <Row>
          <Col span={24}>
          <Table columns={updateColumns} dataSource={tableData} scroll={{x:true}}></Table>
          </Col>
      </Row>:<></>
        }
      
   </Card>
)
}
export default InQuiryProductForm