import React, { useEffect, useState } from 'react'
import { Button, Card, Descriptions, Modal, Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import { ColumnProps } from 'antd/lib/table';
import {RMGrnService} from '@gtpl/shared-services/raw-material-procurement'
import { GrnService } from '@gtpl/shared-services/procurement';
import {ReWeighmentInfo} from '@gtpl/shared-models/raw-material-procurement'
import { PrinterOutlined, ReconciliationOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
import RmWeighmentPrint, {} from 'libs/pages/logistics/logistics-components/documents/src/lib/raw-material-weighment-print'
export interface ReweighmentInfoProps{
    grnId:any
    grnItemId:number
}
export const ReweighmentInfoView = (props:ReweighmentInfoProps) => {
    console.log(props.grnId)
    console.log(props.grnItemId)
    const [data,setData] = useState<any>([])
    const [reweighmentData,setReweighmwntData] = useState<any[]>([])
    const [defectdata,setdefectdata] = useState<any[]>([])
    const [printDisable, setPrintVisable] = useState<boolean>(false);
  const [printId, setPrintId] = useState<number>(null);

    const service = new RMGrnService();

    


    useEffect(()=>{
        getData();
    },[props]);

    const getData = ()=>{
        console.log('ooooooooooo')
        const req = new ReWeighmentInfo(props.grnId,props.grnItemId)
        service.getReWeightMentInfo(req).then((res)=>{
            if(res.status){
                setData(res.data)
                setReweighmwntData(res.data.reweighmentInfo)
                setdefectdata(res.data.defectsInfo);
            }
            
        })
    }

    const handelCancel = () =>{
        setPrintVisable(false)
      }
    const columns: ColumnProps<any>[] = [
        {
          title: 'Boxes',
          dataIndex: 'boxes',
          
        },
        {
          title: 'Quantity',
          dataIndex: 'quantity',
        },
      ];


      const defectscolumn :ColumnProps<any>[] =[
         {
            title:'Defect Name',
            dataIndex: 'defectName',
         },
           { title:'Quantity',
            dataIndex:'quantity',

        },
        {
            title:'Percentage',
            dataIndex:'percentage',
        }



      ];

      const openPrint =(val) =>{
        setPrintVisable(true)
        setPrintId(val.grnId)
        console.log(val);
        
      }


    return(
        <Card
        title='ReWeighMent Info' style={{ textAlign: 'center'}} headStyle={{ backgroundColor: '#69c0ff',fontSize:'15px'  }}
// extra={<Button  onClick={openPrint}><PrinterOutlined/></Button>}

        >
            {/* <Descriptions  layout="horizontal" style={{display:'flex'}} >

           <Descriptions.Item label="Reweightment Boxes">{data?.boxes}</Descriptions.Item>
           <Descriptions.Item label="Sample Quantity"> {data?.sampleQuantity}</Descriptions.Item>
           <Descriptions.Item label="Sample Pieces"> {data?.samplePieces}</Descriptions.Item>
           <Descriptions.Item label="Reweighment Count"> {data?.reweighmentCount}</Descriptions.Item>

            </Descriptions> */}
<div>
    <div style={{display:'flex',width:'100%', justifyContent:'space-between'}}>
        <p>Reweighment Boxes: {data?.boxes}</p>
        <p>Sample Quantity: {data?.sampleQuantity}</p>
        <p>Sample Pieces: {data?.samplePieces}</p>
        <p>Reweighment Count: {data?.reweighmentCount}</p>
    </div>
</div>


            <Table columns={columns} dataSource={reweighmentData} pagination={false}/>
            <br/>
            <h4>Defects</h4>
           {
            defectdata.length > 0 ? (<><Table columns={defectscolumn} dataSource ={defectdata}  pagination={false}/></>) : (<></>)
           }
            
            <Modal
        key={'modal' + Date.now()}
        width={'80%'}
        style={{ top: 30, alignContent: 'right' }}
        visible={printDisable}
        // title={'Raw Material GRN Print'}
        onCancel={handelCancel}
        footer={null}
      >
        <RmWeighmentPrint grnItemId= {props.grnItemId}/>
      </Modal>

        </Card>
    )
}



export default ReweighmentInfoView