import { JobItemsJobIdreq } from '@gtpl/shared-models/warehouse-management';
import { ForkLiftJobService } from '@gtpl/shared-services/warehouse-management';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Card, Descriptions, Table } from 'antd';
import { ColumnProps } from 'antd/lib/table';
import React, { useEffect, useState } from 'react'


export interface ReprocessingJobItemsJobIdProps{
    
    jobId:number;
    jobCode:string;
    poNumber:string;
    shortCode:string;
    packStyle:string;
    totalJobCartons:number;
    totReceivedQuantity:number;

    

  }
    
const ReprocessingJobItemsJobId = (props:ReprocessingJobItemsJobIdProps) => {

    const service = new ForkLiftJobService();
    const [data,setData] =useState<any>([]);
    const [restock,setrestock] =useState<any>([]);


  useEffect(() =>{ 
    getData(),
    getAllrestockProducts()
  },[])
  

    const getData = () =>{
        const req = new JobItemsJobIdreq(props.jobId)
    
            service.getJobItemsAgainstJobId(req).then(res =>{
                if(res.status){
                    setData(res.data);
                } else{
                    if(res.intlCode){
                        AlertMessages.getErrorMessage(res.internalMessage);
                    }else{
                        AlertMessages.getErrorMessage(res.internalMessage);
                    }
                    setData([]);
                }
            })
            .catch((err) =>{
                AlertMessages.getErrorMessage(err.internalMessage);
                setData([]);
            })
        }
    
        const getAllrestockProducts=()=>{
          const req = new JobItemsJobIdreq(props.jobId)
          service.getAllrestockProducts(req).then(res=>{
            if(res.status){
              setrestock(res.data);
            }else{
              if(res.intlCode){
                // AlertMessages.getErrorMessage(res.internalMessage);

              }else{
                // AlertMessages.getErrorMessage(res.internalMessage);

              }
              setrestock([]);

            }
          })
          .catch((err)=>{
            AlertMessages.getErrorMessage(err.internalMessage);
             setrestock([])
          })
        }
    

    const columns: ColumnProps<any>[] = [
    {
        title: 'Po Number',
        dataIndex: 'poNumber',
      },
      {
        title: 'Short Code',
        dataIndex: 'shortCode',
      },
      {
        title: 'Pack Style',
        dataIndex: 'packStyle',
      },
      {
        title: 'Job Cartons',
        dataIndex: 'jobCartons',
      },
      {
        title: 'Job Loose Pouches',
        dataIndex: 'jobLoosePouches',
        render: (text: number | null) => (text === null || text < 0 ? 0 : text),
      },
    ]

  return (
    <>
        <style>
            {
                `.ant-table-pagination.ant-pagination {
                    margin: 16px 0;
                    display: none;
                }
                `
            }
        </style>
        
        <Card
            title={<span style={{ color: "white" }}>Job Items Info</span>}
            style={{ textAlign: 'center' }}
            size='small'
            headStyle={{ backgroundColor: "#69c0ff", border: 0 }}
        >
            <Descriptions  column={{ xxl: 4, xl: 3, lg: 3, md: 1, sm: 1, xs: 1 }} >
         
         <Descriptions.Item label={<b>Job Code</b>}  >
           {props.jobCode}
         </Descriptions.Item>
        
         <Descriptions.Item label={<b>Customer PO </b>}>
         {props.poNumber}
         </Descriptions.Item>
       
         <Descriptions.Item label={<b>Product SKU</b>}>
         {props.shortCode}
         </Descriptions.Item>

         {/* <Descriptions.Item label={<b>Pack Style</b>}>
         {props.packStyle}
         </Descriptions.Item> */}

         <Descriptions.Item label={<b>Total Cartons</b>}>
         {props.totalJobCartons}
         </Descriptions.Item>

         <Descriptions.Item label={<b>Received Quantity</b>}>
         {props.totReceivedQuantity}
         </Descriptions.Item>
       
       </Descriptions>
       <Card 
  title={<div style={{ textAlign: 'left' }}>OutStock Products</div>}
>
  <Table
    className="custom-table-wrapper"
    columns={columns}
    dataSource={data}
    size="small"
  />
</Card>


     <Card 
       title={<div style={{ textAlign: 'left' }}>ReStock Products</div>}
>
  <Table
    className='custom-table-wrapper'
    columns={columns}
    dataSource={restock}
    size='small'
  />
</Card>

    </Card>
    </>
    
  )
}

export default ReprocessingJobItemsJobId;