import React, {useState, useEffect} from 'react';
import { Descriptions, Badge, Layout, Row, Col, Card, Button, Spin } from 'antd';
import { PrinterOutlined } from '@ant-design/icons'
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import ReactHTMLTableToExcel from 'react-html-table-to-excel';
import {BlanchingCookingService} from '@gtpl/shared-services/production'
import moment from 'moment';

import './blanching-cooking-print.css';
import { BlanchingCookingDto, LogIdRequest } from '@gtpl/shared-models/production-management';

/* eslint-disable-next-line */
export interface BlanchingCookingPrintProps {
  productionLogId : number;
}

export function BlanchingCookingPrint(
  props: BlanchingCookingPrintProps
) {

  const [samples, setSamples] = useState<BlanchingCookingDto[]>(undefined);
  const sampleService = new BlanchingCookingService();
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);

  // const getCssFromComponent = (fromDoc, toDoc) => {
  //   Array.from(fromDoc.styleSheets).forEach((styleSheet: any) => {
  //     if (styleSheet.cssRules) { // true for inline styles
  //       const newStyleElement = toDoc.createElement('style');
  //       Array.from(styleSheet.cssRules).forEach((cssRule: any) => {
  //         newStyleElement.appendChild(toDoc.createTextNode(cssRule.cssText));
  //       });
  //       toDoc.head.appendChild(newStyleElement);
  //     }
  //   });
  // }

   const getCssFromComponent = (fromDoc: Document, toDoc: Document) => {
    Array.from(fromDoc.styleSheets).forEach((styleSheet: CSSStyleSheet) => {
      try {
        if (styleSheet?.cssRules) { // true for inline styles and same-origin stylesheets
          const newStyleElement = toDoc.createElement("style");
          Array.from(styleSheet.cssRules).forEach((cssRule: CSSRule) => {
            newStyleElement.appendChild(toDoc.createTextNode(cssRule.cssText));
          });
          toDoc.head.appendChild(newStyleElement);
        }
      } catch (e) {
        console.warn("Could not access stylesheet rules for", styleSheet.href, e);
      }
    });
  };

  const printOrder = () => {
    const divContents = document.getElementById('printme').innerHTML;
    const element = window.open('', '', 'height=700, width=1024');
    element.document.write(divContents);
    getCssFromComponent(document, element.document);
    element.document.close();
    element.print();
    element.close(); // to close window when click on cancel/Save
    setIsModalVisible(true); // model should be open
  };

  const getSamplleInfoByLogId = (productionLogId) => {
    const req = new LogIdRequest(productionLogId);
    sampleService.getSamplleInfoByLogId(req).then(res => {
      if (res.status) {
        setSamples(res.data);
        console.log
      } else {
        setSamples(undefined);
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
 
  useEffect( () => {
    if(props.productionLogId){
      getSamplleInfoByLogId(props.productionLogId);
    }
  },[props.productionLogId])


  return (
  //   <div>
  //   <>
  //   <br/><br/>
  //   {!samples ? 
  //   ''
  //   :<html>
  //      <head>      
  //      </head>
  //      <body id ='printme'>
  //      <Button onClick={printOrder} className='noprint' style={{float:'right', backgroundColor:'#69c0ff'}}><span style={{ color: 'white' }}><PrinterOutlined /> Print</span></Button>
  //      <br/><br/>
  //        <table style={{width : '100%'}}>
  //          <tr style={{borderBottom: '0px'}}>
  //            <td colSpan={4} style={{fontSize: '17px', lineHeight:'12px', paddingTop:'20px', textAlign: 'center' }}>
  //            <h2 >SANDHYA AQUA EXPORTS PVT. LIMITED, PAMARRU</h2>
  //            <h3 ><br/><span style={{backgroundColor: '#57595A', color: '#D4E1E7', margin: '4px'}}>RAW MATERIAL VEHICLE INSPECTION REPORT</span></h3>
  //          </td>
  //          </tr>  
  //          <tr>
  //            <td colSpan = {4}>
  //               <h3 style= {{display:'inline'}}>Date: </h3>&ensp;{moment(new Date()).format('YYYY-MM-DD')}
  //            </td>
  //          </tr>   
  //          <tr><td colSpan={4} style={{fontSize: '17px', lineHeight:'12px', paddingTop:'20px', textAlign: 'center' }}>       
  //          </td></tr>
  //          <tr>
  //            <td>
  //              <h3>HON QTY</h3>
  //            </td>
  //            <td>
  //              :&ensp;{samples?.hOnQty}
  //            </td>
  //            <td>
  //               <h3 style= {{display:'inline'}}>Date: </h3>&ensp;{moment(new Date()).format('YYYY-MM-DD')}
  //            </td>
             
  //          </tr>
  //          <tr>
  //            <td>
  //              <h3>HL QTY</h3>
  //            </td>
  //            <td>
  //              {/* :&ensp;{formatAMPM(samples?.arrivalTime)} */}
  //              :&ensp;{samples?.hLessQty}
  //            </td>
            
  //          </tr>
  //          <tr>
  //            <td colSpan={4}>
  //              <table style={{display: 'table', border: '1px solid black'}}>
  //                <tr style={{display: 'table-cell'}}>
  //                  <td style={{display: 'block', border: '1px solid black'}} ><h3>Sample No.</h3></td>
  //                  <td style={{display: 'block', border: '1px solid black'}}><h3>Variety</h3></td>
  //                  <td style={{display: 'block', border: '1px solid black'}}><h3>B.No/S.Code</h3></td>
  //                  <td style={{display: 'block', border: '1px solid black'}}><h3>Temperature</h3></td>
  //                  <td style={{display: 'block', border: '1px solid black'}}><h3>DISCOLORATION</h3></td>
  //                  <td style={{display: 'block', border: '1px solid black'}}><h3>DETERIORATION</h3></td>
  //                  <td style={{display: 'block', border: '1px solid black'}}><h3>SOFT TAIL</h3></td>
  //                  <td style={{display: 'block', border: '1px solid black'}}><h3>BLACK TAIL/SPOT</h3></td>
  //                  <td style={{display: 'block', border: '1px solid black'}}><h3>BROKEN/UN USABLE</h3></td>
  //                  <td style={{display: 'block', border: '1px solid black'}}><h3>IMPROPER DEHEADING</h3></td>
  //                  <td style={{display: 'block', border: '1px solid black'}}><h3>BROWN MEAT</h3></td>
  //                  <td style={{display: 'block', border: '1px solid black'}}><h3>HANGING MEAT/THROAT</h3></td>
                                  
  //                </tr> 
  //                {samples?.deheadingSampleInfo.map(sample => {
  //                  return(
                    
  //                      <tr style={{display: 'table-cell'}}>
  //                        <td style={{display: 'block', textAlign: 'center', border: '1px solid black'}}><h3>{sample.sampleNo}</h3></td>
  //                        <td style={{display: 'block', textAlign: 'center', border: '1px solid black'}}>{samples.varietyOfMaterial}</td>                  
  //                        <td style={{display: 'block', textAlign: 'center', border: '1px solid black'}}>{sample.batchNo}</td>
  //                        <td style={{display: 'block', textAlign: 'right', border: '1px solid black'}}>{sample.temperature}</td>
  //                        <td style={{display: 'block', textAlign: 'center', border: '1px solid black'}}>{sample.discoloration}</td>
  //                        <td style={{display: 'block', textAlign: 'center', border: '1px solid black'}}>{sample.deterioration}</td>
  //                        <td style={{display: 'block', textAlign: 'center', border: '1px solid black'}}>{sample.softTail}</td>
  //                        <td style={{display: 'block', textAlign: 'center', border: '1px solid black'}}>{sample.blackTail}</td>
  //                        <td style={{display: 'block', textAlign: 'center', border: '1px solid black'}}>{sample.brokenOrUnUsable}</td>
  //                        <td style={{display: 'block', textAlign: 'center', border: '1px solid black'}}>{sample.improperDeheading}</td>
  //                        <td style={{display: 'block', textAlign: 'center', border: '1px solid black'}}>{sample.brownMeat}</td>
  //                        <td style={{display: 'block', textAlign: 'center', border: '1px solid black'}}>{sample.hangingMeatOrThroat}</td>
                        
                        
  //                      </tr> 
  //                  )   
  //                })}            
  //              </table>
  //            </td>
  //          </tr>
  //          <tr>
  //            <td colSpan={2} style={{border: '1px solid black', borderRight: '0px'}}><h3><u>Remarks and <br/>Corrective Action</u></h3></td>
  //            <td colSpan={2} style={{border: '1px solid black', borderLeft: '0px'}}>{ }</td>
  //          </tr>
  //          <tr >
  //            <td colSpan = {4} style={{textAlign:'center'}}><h3>*Note:</h3>&ensp; Sample tested for every 1000 kgs each       N - Nil     P-pieces</td>
  //          </tr>
  //          <tr>
  //            <td colSpan ={2} style={{textAlign: 'center'}}>
  //            <br/><br/><br/><br/>
  //            <h3>Checked by</h3>
  //            </td> 
  //            <td colSpan ={2} style={{textAlign: 'center'}}>
  //            <br/><br/><br/><br/>
  //            <h3>Verified by</h3>
  //            </td>            
  //          </tr>
  //        </table>
  //        <script type='text/javascript'>
 
  //        </script>
  //      </body>
  //    </html>  
  //   }
  //   </> 
  //  </div>
  <div>

  </div>
  );
}

export default BlanchingCookingPrint;
