import { WarehouseDashboardService } from '@gtpl/shared-services/analytics';
import { Button, Card, Col, DatePicker, Form, Row, Select } from 'antd';
import { ProductSummaryReportReq } from 'libs/shared-models/warehouse-management/src/lib/product-analysis-mis/product-analysis-req';
import React, { useEffect, useState } from 'react';
const { MonthPicker } = DatePicker;

type Category1DataPrototype = { 
    grade_id: number
    grade_name: string,
    reportingDate:  string,
    transaction_type: string,
    total_weight_in_kg: number
}

type StockDataPrototype = {
    grade_id: number,
    grade_name: string,
    total_weight_in_kg: number
}

type Category2DataPrototype = {
    grade_id: number,
    grade_name: string,
    job_purpose: string,
    date:string,
    total_weight_in_kg: number
}

// used for table construction
type leastInfo = {
    grade?: string;
    weight?: number;
}

type subTableContent = {
    category?: string;
    gradeWiseInfo?: leastInfo[];
}

const ProductionSummaryReport = () => {
    const warehouseService = new WarehouseDashboardService();
    const [gradeInfo, setGradeInfo] = useState<any[]>([]);
    const [productionData, setProductionData] = useState<any[]>([]);
    const [shipmentData, setShipmentData] = useState<any[]>([]);
    const [form] = Form.useForm();
    const [selectedYear, setSelectedYear] = useState<number>();
    const [selectedMonth, setSelectedMonth] = useState<number>();
    const [shortCodes,setShortCodes]=useState<any[]>([])
    const {Option}=Select
    const [packStyle,setPackingStyle]=useState<any[]>([]);
    const [fgLiftData,setFgLiftData] = useState<any>([]);
    const [finalTableData, setFinalTableData] = useState<Map<string, Map<string, subTableContent>>>();
    


    useEffect(()=>{
        getShortCodeDropdown()
        getPackStyleForProductAnalysisReport()
    },[])

    const getShortCodeDropdown=()=>{
        warehouseService.getShortCodeDropdown().then(res=>{
            if(res.status){
                setShortCodes(res.data)
            }
        })
    }

    const getPackStyleForProductAnalysisReport=()=>{
        warehouseService.getPackStyleForProductAnalysisReport().then(res=>{
            if(res.status){
                setPackingStyle(res.data)
            }
        })
    }

    const getGradesOpeningStockForProductionReport = async (year: number, month: number, varientId: number, packStyleId: number) => {
        const req = new ProductSummaryReportReq(month, year, varientId, packStyleId);
        await warehouseService.getGradesOpeningStockForProductionReport(req).then(res => {
            if (res.status) {
                setGradeInfo(res.data);
            }else{
                setGradeInfo([])
            }
        }).catch(err => {
            console.error('Error fetching grade info:', err);
            setGradeInfo([]); 
        });
    };
    

    const getProductionGradeInfoForProductionReport = (year: number, month: number, varientId: number, packStyleId: number) => {
        const req = new ProductSummaryReportReq(month, year, varientId, packStyleId);
        warehouseService.getProductionGradeInfoForProductionReport(req).then(res => {
            if (res.status) {
                setProductionData(res.data); 
            } else {
                console.error('Unexpected response format for additional data:', res);
                setProductionData([]);
            }
        }).catch(err => {
            console.error('Error fetching additional data:', err);
            setProductionData([]); 
        });
    };

    const getShippedReprocessedGradeInfoForProductionReport = (year: number, month: number, varientId: number, packStyleId: number) => {
        const req = new ProductSummaryReportReq(month, year, varientId, packStyleId);
        warehouseService.getShippedReprocessedGradeInfoForProductionReport(req).then(res => {
            if (res.status) {
                setShipmentData(res.data);
                // constructAndSetTableData(gradeInfo, productionData, res);
            } else {
                console.error('Unexpected response format for additional data:', res);
                setFgLiftData([]);
            }
        }).catch(err => {
            console.error('Error fetching additional data:', err);
            setFgLiftData([]); 
        });
    };

    const constructAndSetTableData = (stockData: StockDataPrototype[], category1Data: Category1DataPrototype[], category2Data: Category2DataPrototype[])=>{
      console.log(stockData,"stockData")
      console.log(category1Data,"category1Data")
      console.log(category2Data,"category2Data")

        const gradesSet = new Set<string>();
        stockData.forEach(r => {
            gradesSet.add(r.grade_name);
        });
        category1Data.forEach(r => {
            gradesSet.add(r.grade_name);
        });
        category2Data.forEach(r => {
            gradesSet.add(r.grade_name);
        });
        // now we have the total grades 
        
        const catWiseInfoMap1 = new Map<string, Map<string, subTableContent>>(); // category type => date => grade qty info

        const catWiseInfoMap2 = new Map<string, Map<string, subTableContent>>(); // category type => date => grade qty info
        // diffrentiate the category wise qtys 
        category1Data.forEach(r =>{
            if(!catWiseInfoMap1.has(r.transaction_type)) {
                catWiseInfoMap1.set(r.transaction_type, new Map<string, subTableContent>());
            }
            if(!catWiseInfoMap1.get(r.transaction_type).has(r.reportingDate)) {
                catWiseInfoMap1.get(r.transaction_type).set(r.reportingDate, {});
                catWiseInfoMap1.get(r.transaction_type).get(r.reportingDate).gradeWiseInfo = [];
                catWiseInfoMap1.get(r.transaction_type).get(r.reportingDate).category = r.transaction_type;
            }   
            catWiseInfoMap1.get(r.transaction_type).get(r.reportingDate).gradeWiseInfo.push({
                grade: r.grade_name,
                weight: r.total_weight_in_kg
            });
        });
        category2Data.forEach(r =>{
            if(!catWiseInfoMap2.has(r.job_purpose)) {
                catWiseInfoMap2.set(r.job_purpose, new Map<string, subTableContent>());
            }
            if(!catWiseInfoMap2.get(r.job_purpose).has(r.date)) {
                catWiseInfoMap2.get(r.job_purpose).set(r.date, {});
                catWiseInfoMap2.get(r.job_purpose).get(r.date).gradeWiseInfo = [];
                catWiseInfoMap2.get(r.job_purpose).get(r.date).category = r.job_purpose;
            }   
            catWiseInfoMap2.get(r.job_purpose).get(r.date).gradeWiseInfo.push({
                grade: r.grade_name,
                weight: r.total_weight_in_kg
            });
        });
        return returnFinalTable(catWiseInfoMap1, catWiseInfoMap2, gradesSet, stockData);
    }

    function returnFinalTable(
        finalDataMap: Map<string, Map<string, subTableContent>>,
        finalDataMap2: Map<string, Map<string, subTableContent>>,
        gradesSet: Set<string>,
        stockInfo: StockDataPrototype[]
      ) {
        const totalCols = gradesSet.size + 2;

        function formatDate(dateString: string): string | null {
          // Check if the input is a valid string
          if (!dateString) {
              console.error('Invalid date string:', dateString);
              return null; // Or return a default value like '' or 'N/A'
          }
      
          const date = new Date(dateString);
          
          // Check if the date is valid
          if (isNaN(date.getTime())) {
              console.error('Invalid date format:', dateString);
              return null; // Or return a default value like '' or 'N/A'
          }
      
          // Format the date to 'YYYY-MM-DD'
          return date.toISOString().split('T')[0];
      }
      
      
        function gradeTable(gradesSet: Set<string>, stockInfo: StockDataPrototype[]) {
          const gradesArray: string[] = Array.from(gradesSet);
          let totalStockSum = 0;
          stockInfo.forEach((r) => (totalStockSum += Number(r.total_weight_in_kg)));
      
          const varientId = form.getFieldValue('varientId')
          const varient = shortCodes.find(obj => obj.varientId == varientId)
          const styleId = form.getFieldValue('packStyleId')
          const style = packStyle.find(obj => obj.packStyleId == styleId)

          return (
            <>
              <tr>
                <th colSpan={totalCols} style={{ border: '1px solid black' }}>{varient?.shortCode + ' ' + style?.packingMethodName}</th>
              </tr>
              <tr>
                <th style={{ border: '1px solid black' }}>Date</th>
                {gradesArray.map((r) => (
                  <td style={{ border: '1px solid black' }} key={r}>{r}</td>
                ))}
                <th style={{ border: '1px solid black' }}>Total</th>
              </tr>
              <tr>
                <th style={{ border: '1px solid black' }}>O/B</th>
                {gradesArray.map((r) => {
                  const weight = stockInfo.find((i) => i.grade_name === r)?.total_weight_in_kg ?? 0;
                  return <td style={{ border: '1px solid black' }} key={r}>{weight}</td>;
                })}
                <td style={{ border: '1px solid black' }}>{totalStockSum}</td>
              </tr>
            </>
          );
        }
      
        function category1Table(
          finalDataMap: Map<string, Map<string, subTableContent>>,
          gradesSet: Set<string>,
          types: { key: string; dName: string }[]
        ) {
          const gradesArray: string[] = Array.from(gradesSet);
          return types.map((type) => {
            const typeSpecificData = finalDataMap.get(type.key);
            if (!typeSpecificData) return null; // Safeguard against undefined values
      
            const dateWiseInfoArray = Array.from(typeSpecificData);
            const gradeWiseTypeTotal: { [grade: string]: number } = {}; // Use object for total accumulation
            let totalRowColsSum = 0;
      
            return (
              <React.Fragment key={type.key}>
                <tr>
                  <th colSpan={totalCols} style={{ border: '1px solid black' }}>{type.dName}</th>
                </tr>
                {dateWiseInfoArray.map((info) => {
                  const date = info[0];
                  const gradeQtys = info[1]?.gradeWiseInfo;
                  let dateTotal = 0;
      
                  gradeQtys.forEach((g) => {
                    const weight = Number(g.weight);
                    dateTotal += weight;
      
                    if (!gradeWiseTypeTotal[g.grade]) {
                      gradeWiseTypeTotal[g.grade] = 0;
                    }
                    gradeWiseTypeTotal[g.grade] += weight;
                    totalRowColsSum += weight;
                  });
      
                  return (
                    <tr key={date}>
                      <td style={{ border: '1px solid black' }}>{formatDate(date)}</td>
                      {gradesArray.map((g) => {
                        const weight = gradeQtys.find((i) => i.grade === g)?.weight ?? 0;
                        return <td style={{ border: '1px solid black' }} key={g}>{weight}</td>;
                      })}
                      <td style={{ border: '1px solid black' }}>{dateTotal}</td>
                    </tr>
                  );
                })}
                <tr>
                  <th style={{ border: '1px solid black' }}>TOTAL</th>
                  {gradesArray.map((g) => {
                    return <td style={{ border: '1px solid black' }} key={g}>{gradeWiseTypeTotal[g] ?? 0}</td>;
                  })}
                  <td style={{ border: '1px solid black' }}>{totalRowColsSum}</td>
                </tr>
              </React.Fragment>
            );
          });
        }

        function category2Table(
            finalDataMap: Map<string, Map<string, subTableContent>>,
            gradesSet: Set<string>,
            types: { key: string; dName: string }[]
          ) {
            const gradesArray: string[] = Array.from(gradesSet);
        
            return types.map((type) => {
              const typeSpecificData = finalDataMap.get(type.key);
              if (!typeSpecificData) return null; // Safeguard against undefined values
        
              const dateWiseInfoArray = Array.from(typeSpecificData);
              const gradeWiseTypeTotal: { [grade: string]: number } = {}; // Use object for total accumulation
              let totalRowColsSum = 0;
        
              return (
                <React.Fragment key={type.key}>
                  <tr>
                    <th colSpan={totalCols} style={{ border: '1px solid black' }}>{type.dName}</th>
                  </tr>
                  {dateWiseInfoArray.map((info) => {
                    const date = info[0];
                    const gradeQtys = info[1]?.gradeWiseInfo;
                    let dateTotal = 0;
        
                    gradeQtys.forEach((g) => {
                      const weight = Number(g.weight);
                      dateTotal += weight;
        
                      if (!gradeWiseTypeTotal[g.grade]) {
                        gradeWiseTypeTotal[g.grade] = 0;
                      }
                      gradeWiseTypeTotal[g.grade] += weight;
                      totalRowColsSum += weight;
                    });
        
                    return (
                      <tr key={date}>
                        <td style={{ border: '1px solid black' }}>{formatDate(date)}</td>
                        {gradesArray.map((g) => {
                          const weight = gradeQtys.find((i) => i.grade === g)?.weight ?? 0;
                          return <td style={{ border: '1px solid black' }} key={g}>{weight}</td>;
                        })}
                        <td style={{ border: '1px solid black' }}>{dateTotal}</td>
                      </tr>
                    );
                  })}
                  <tr>
                    <th style={{ border: '1px solid black' }}>TOTAL</th>
                    {gradesArray.map((g) => {
                      return <td style={{ border: '1px solid black' }} key={g}>{gradeWiseTypeTotal[g] ?? 0}</td>;
                    })}
                    <td style={{ border: '1px solid black' }}>{totalRowColsSum}</td>
                  </tr>
                </React.Fragment>
              );
            });
          }

        function monthlyTotalTable1(
          finalDataMap: Map<string, Map<string, subTableContent>>,
          gradesSet: Set<string>,
          types: { key: string; dName: string }[]
        ) {
          const gradesArray: string[] = Array.from(gradesSet);
          const gradeWiseTypeTotal: { [grade: string]: number } = {}; // Use object for total accumulation
          let totalMonthlySum = 0;
      
          types.forEach((r) => {
            const dateWiseQtys = finalDataMap.get(r.key);
            if (!dateWiseQtys) return;
      
            dateWiseQtys.forEach((d) => {
              d.gradeWiseInfo.forEach((gq) => {
                if (!gradeWiseTypeTotal[gq.grade]) {
                  gradeWiseTypeTotal[gq.grade] = 0;
                }
                gradeWiseTypeTotal[gq.grade] += Number(gq.weight);
                totalMonthlySum += Number(gq.weight);
              });
            });
          });
      
          let totalRowColsSum = Number(totalMonthlySum);
          stockInfo.forEach((s) => {
            totalRowColsSum += Number(s.total_weight_in_kg);
          });
      
          return (
            <>
            <tr>
                <th colSpan={totalCols} style={{ border: '1px solid black' }}>&nbsp;</th>
            </tr>
              <tr>
                <th style={{ border: '1px solid black' }}>TOTAL</th>
                {gradesArray.map((r) => {
                  const weight = stockInfo.find((i) => i.grade_name === r)?.total_weight_in_kg ?? 0;
                  const totalWeight = Number(weight) + Number(gradeWiseTypeTotal[r] ?? 0);
                  return <th style={{ border: '1px solid black' }} key={r}>{totalWeight}</th>;
                })}
                <th style={{ border: '1px solid black' }}>{totalRowColsSum}</th>
              </tr>
              <tr>
                <th style={{ border: '1px solid black' }}>MONTHLY</th>
                {gradesArray.map((r) => (
                  <th style={{ border: '1px solid black' }} key={r}>{gradeWiseTypeTotal[r] ?? 0}</th>
                ))}
                <th style={{ border: '1px solid black' }}>{totalMonthlySum}</th>
              </tr>
            </>
          );
        }

        function monthlyTotalTable2(
            finalDataMap: Map<string, Map<string, subTableContent>>,
            finalDataMap2: Map<string, Map<string, subTableContent>>,
            gradesSet: Set<string>,
            types1: { key: string; dName: string }[],
            types2: { key: string; dName: string }[],
          ) {
            const gradesArray: string[] = Array.from(gradesSet);
            const gradeWiseTypeTotal1: { [grade: string]: number } = {}; // Use object for total accumulation
            let totalMonthlySum1 = 0;
            let totalMonthlySum2 = 0;

            const gradeWiseTypeTotal2: { [grade: string]: number } = {}; // Use object for total accumulation

            types1.forEach((r) => {
              const dateWiseQtys = finalDataMap.get(r.key);
              if (!dateWiseQtys) return;
        
              dateWiseQtys.forEach((d) => {
                d.gradeWiseInfo.forEach((gq) => {
                  if (!gradeWiseTypeTotal1[gq.grade]) {
                    gradeWiseTypeTotal1[gq.grade] = 0;
                  }
                  gradeWiseTypeTotal1[gq.grade] += Number(gq.weight);
                  totalMonthlySum1 += Number(gq.weight);
                });
              });
            });

            types2.forEach((r) => {
                const dateWiseQtys = finalDataMap2.get(r.key);
                if (!dateWiseQtys) return;
          
                dateWiseQtys.forEach((d) => {
                  d.gradeWiseInfo.forEach((gq) => {
                    if (!gradeWiseTypeTotal2[gq.grade]) {
                      gradeWiseTypeTotal2[gq.grade] = 0;
                    }
                    gradeWiseTypeTotal2[gq.grade] += Number(gq.weight);
                    totalMonthlySum2 += Number(gq.weight);
                  });
                });
              });
        
            let totalRowColsSum = Number(totalMonthlySum1) - Number(totalMonthlySum2);
            stockInfo.forEach((s) => {
              totalRowColsSum += Number(s.total_weight_in_kg);
            });
        
            const looseTotal = Number(totalRowColsSum) - Number(Number(Number(totalRowColsSum)/10) * 10)

            return (
              <>
                <tr>
                  <th style={{ border: '1px solid black' }}>C/B</th>
                  {gradesArray.map((r) => {
                    const stockWeight = stockInfo.find((i) => i.grade_name === r)?.total_weight_in_kg ?? 0;
                    console.log(stockWeight)
                    console.log(gradeWiseTypeTotal1[r])
                    console.log(gradeWiseTypeTotal2[r])
                    const totalWeight = Number(stockWeight) + (Number(gradeWiseTypeTotal1[r] ?? 0) - (Number(gradeWiseTypeTotal2[r] ?? 0)));
                    return <th style={{ border: '1px solid black' }} key={r}>{(totalWeight).toFixed(2)}</th>; 
                  })}
                  <th style={{ border: '1px solid black' }}>{(totalRowColsSum).toFixed(2)}</th>
                </tr>
                <tr>
                  <th style={{ border: '1px solid black' }}>M/C</th>
                  {gradesArray.map((r) => {
                    const stockWeight = stockInfo.find((i) => i.grade_name === r)?.total_weight_in_kg ?? 0;
                    // console.log(stockWeight)
                    // console.log(gradeWiseTypeTotal1[r])
                    // console.log(gradeWiseTypeTotal2[r])
                    const totalWeight = Number(stockWeight) + (Number(gradeWiseTypeTotal1[r] ?? 0) - (Number(gradeWiseTypeTotal2[r] ?? 0)));
                    return <th style={{ border: '1px solid black' }} key={r}>{(Number(totalWeight)/10).toFixed(2)}</th>; 
                  })}
                  <th style={{ border: '1px solid black' }}>{(Number(totalRowColsSum)/10).toFixed(2)}</th>
                </tr>
                <tr>
                  <th style={{ border: '1px solid black' }}>LOOSE</th>
                  {gradesArray.map((r) => {
                    const stockWeight = stockInfo.find((i) => i.grade_name === r)?.total_weight_in_kg ?? 0;
                    // console.log(stockWeight)
                    // console.log(gradeWiseTypeTotal1[r])
                    // console.log(gradeWiseTypeTotal2[r])
                    const totalWeight = Number(stockWeight) + (Number(gradeWiseTypeTotal1[r] ?? 0) - (Number(gradeWiseTypeTotal2[r] ?? 0)));
                    const loose = Number(totalWeight) - Number(Number(Number(totalWeight)/10) * 10)
                    return <th style={{ border: '1px solid black' }} key={r}>{Number(loose).toFixed(2)}</th>; 
                  })}
                  <th style={{ border: '1px solid black' }}>{Number(looseTotal).toFixed(2)}</th>
                </tr>
              </>
            );
          }
      
        return (
          <table style={{ width: '100%', marginTop: '20px', border: '1px solid #ddd', borderCollapse: 'collapse' }}>
            {gradeTable(gradesSet, stockInfo)}
            {category1Table(finalDataMap, gradesSet, [
              { key: 'rm', dName: 'PRODUCTION' },
              { key: 'reprocessing', dName: 'RE-PRODUCTION & Re-Work' },
            ])}
            {monthlyTotalTable1(finalDataMap, gradesSet, [
              { key: 'rm', dName: 'PRODUCTION' },
              { key: 'reprocessing', dName: 'RE-PRODUCTION & Re-Work' },
            ])}
            {category2Table(finalDataMap2, gradesSet, [
              { key: 'dispatch', dName: 'SHIPPED' },
              { key: 'repacking', dName: 'REPROCESS & Rework (OUT)' },
              { key: 'compliments', dName: 'COMPLIMENTS/LAB INSPECTIONS' }
            ])}
            {monthlyTotalTable2(finalDataMap,finalDataMap2, gradesSet, [
              { key: 'rm', dName: 'PRODUCTION' },
              { key: 'reprocessing', dName: 'RE-PRODUCTION & Re-Work' }
            ],[
              { key: 'dispatch', dName: 'SHIPPED' },
              { key: 'repacking', dName: 'REPROCESS & Rework (OUT)' },
              { key: 'compliments', dName: 'COMPLIMENTS/LAB INSPECTIONS' }
            ])}
          </table>
        );
      }
    const handleMonthChange = (date: any) => {
        if (date) {
            const year = date.year();
            const month = date.month() + 1; 
            setSelectedMonth(month);
            setSelectedYear(year);
        }
    };

    const onSearch = async () => {
        if (selectedYear && selectedMonth) {
            setGradeInfo([])
            setProductionData([])
            setShipmentData([])
            try {
                await Promise.all([
                    getGradesOpeningStockForProductionReport(selectedYear, selectedMonth, form.getFieldValue('varientId'), form.getFieldValue('packStyleId')),
                    getProductionGradeInfoForProductionReport(selectedYear, selectedMonth, form.getFieldValue('varientId'), form.getFieldValue('packStyleId')),
                    getShippedReprocessedGradeInfoForProductionReport(selectedYear, selectedMonth, form.getFieldValue('varientId'), form.getFieldValue('packStyleId'))
                ]);
                { shipmentData.length > 0 ?  constructAndSetTableData(gradeInfo, productionData, shipmentData) : null }

            } catch (error) {
                console.error("Error occurred while fetching production reports:", error);
                // Handle error (e.g., show a notification or message to the user)
            }
        }
    };
    

    const onReset = () => {
        form.resetFields();
        setGradeInfo([])
        setProductionData([])
        setShipmentData([])
        setSelectedMonth(undefined);
        setSelectedYear(undefined);
    };



    const totalWeight = gradeInfo.reduce((total, grade) => total + (grade.total_weight_in_kg || 0), 0);
    console.log(shipmentData,"shipmentData")
    console.log(productionData,'PPPPPPPPP')

    return (
        <div>
            <Card size='small' title={<span style={{color:'white'}}>Production Summary Report</span>} 
    style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }}>
            <Form form={form} onFinish={onSearch} layout='vertical'>
                <Row gutter={24}>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 5 }}>
                        <Form.Item name="date" label="Month" rules={[
                                        {
                                          required: true,
                                          message: 'Month is mandatory',
                                        },
                                      ]}>
                            <MonthPicker style={{ width: '100%' }} onChange={handleMonthChange} placeholder='Select Month'/>
                        </Form.Item>
                    </Col>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 6 }}>
              <Form.Item name='varientId' label='Product' rules={[
                              {
                                required: true,
                                message: 'Product is mandatory',
                              },
                            ]}>
                <Select allowClear showSearch  optionFilterProp="children"
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} placeholder='Select Product'>
                  {
                    shortCodes?.map(e => {
                      return(
                        <Option key={e.varientId} value={e.varientId}>{e.shortCode}</Option>

                      )
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 6 }}>
              <Form.Item name='packStyleId' label='Pack style' rules={[
                            {
                              required: true,
                              message: 'Pack Style is mandatory',
                            },
                          ]}>
                <Select allowClear showSearch optionFilterProp="children"
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} placeholder='Select Packstyle'>
                  {
                    packStyle?.map(e => {
                      return(
                        <Option key={e.packStyleId} value={e.packStyleId}>{e.packingMethodName}</Option>

                      )
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
                    <Col style={{ paddingLeft: '10px', marginTop: '30px' }}>
                        <Form.Item>
                            <Button htmlType='submit' type='primary'>Get Report</Button>
                        </Form.Item>
                    </Col>
                    <Col style={{ paddingLeft: '10px', marginTop: '30px' }}>
                        <Form.Item>
                            <Button type='primary' onClick={onReset}>Reset</Button>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
                        
            <table style={{ width: '100%', marginTop: '20px', border: '1px solid #ddd', borderCollapse: 'collapse' }}>
                <tbody>
                    { gradeInfo.length > 0 ?  constructAndSetTableData(gradeInfo, productionData, shipmentData) : null }
                </tbody>
            </table>
            </Card>
        </div>
    );
};

export default ProductionSummaryReport;