import { Card, Button, Form, Descriptions } from 'antd';
import './stock-in-form.css'
import React, { useEffect, useState } from 'react';
import form from 'antd/lib/form';
import { QrcodeOutlined, SearchOutlined, PrinterOutlined, BarcodeOutlined } from '@ant-design/icons';
import { StockInPrinResponse, StockInPritnRequest, StockInService } from '@gtpl/shared-services/warehouse-management';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import moment from 'moment';


export interface StockInQrPrintProps { reportingLogId: number }
export function StockInQrPrint(props: StockInQrPrintProps) {

  const [from] = Form.useForm();
  const [stockinPrint, setstockinPrint] = useState<StockInPrinResponse[]>();
  const [responseData, setResponseData] = useState<StockInPrinResponse[]>([]);
  const [transactionType, settransactionType] = useState<any>([]);
  const time = moment().format("DD-MM-YYYY HH:mm")


  const service = new StockInService;
  useEffect(() => {
    getStockInPrint();

  }, [])

   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 getCssFromComponent = (fromDoc, toDoc) => {
  //   Array.from(fromDoc.styleSheets).forEach((styleSheet: any) => {
  //     // console.log(styleSheet.cssRules);
  //     // 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);
  //     // }
  //   });
  // }
  console.log(props.reportingLogId, 'props')
  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 getStockInPrint = () => {
    const req = new StockInPritnRequest(props.reportingLogId)

    service.getStockInPrint(req).then(res => {
      if (res.status) {

        setResponseData(res.data);

      } else {
        setstockinPrint([]);
        AlertMessages.getErrorMessage(res.internalMessage)
      }
    })
  }
  return (
    <>
      <div id='printme' className='ticket'>
        {
          responseData.length > 0 ?
            <>
              <td className='ta-b' colSpan={11}> <Button onClick={printOrder} className='hidden' style={{ float: 'right', backgroundColor: '#69c0ff' }}><span style={{ color: 'white' }}><PrinterOutlined /> Print</span></Button></td>
              <br />

              <table className={'ta-b'} id={'body'} style={{ width: '100%' }} >
                <tr><td className={'ta-b'} colSpan={11} style={{ textAlign: 'right' }}>{time}</td></tr>

                <tr> <td className={'ta-b'} colSpan={11} >PO NO:<b>{(responseData[0].stocktype == 'SaleOrder' ? responseData[0].customerPo : responseData[0].stocktype == 'Dummy' ? 'DUMMY' : '-')}</b></td></tr>
                <tr><td className={'ta-b'} colSpan={11}>PRODUCT:<b>{(responseData[0].varientcode) ? responseData[0].varientcode : '-'}</b></td></tr>
                <br></br>
                <tr>
                  <td className={'ta-b'} colSpan={3}>Rack Position</td>
                  <td className={'ta-b'} colSpan={2}><b>{(responseData[0].rackPostion) ? responseData[0].rackPostion : '-'}</b></td>
                </tr>
                <tr>
                  <td className={'ta-b'} colSpan={3}>Reported Cases</td>
                  <td className={'ta-b'} colSpan={2}><b>{(responseData[0].reportedCases) ? responseData[0].reportedCases : responseData[0].reportedCases}</b></td>
                </tr>
              </table>
            </> : <></>
        }
      </div>
    </>
  )
}
export default StockInQrPrint