import React, { useState } from 'react';
import { Button, Card, Col, Divider, Input, Row, Select, Tag } from 'antd';
import './scan-token-form.css';
import { ConsumeTokenRequest, TokenPrintModel } from '@gtpl/shared-models/canteen-management';
import { FreebiesMappingConsumptionService } from '@gtpl/shared-services/canteen-management';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';

/* eslint-disable-next-line */
export interface ScanTokenFormProps { }

// export 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);
//     }
//   });
// }

export 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);
    }
  });
};

export function ScanTokenForm(
  props: ScanTokenFormProps
) {
  const [token, setToken] = useState<string>('');
  const [printContent, setPrintContent] = useState<TokenPrintModel>();
  const [showPrint, setShowPrint] = useState<boolean>(false);
  const freebieConsService = new FreebiesMappingConsumptionService();

  function scanToken(token: string) {
    const tokenReq = new ConsumeTokenRequest(token, '0', new Date().toDateString());
    freebieConsService.consumeToken(tokenReq).then(res => {
      if (!res.status) {
        AlertMessages.getErrorMessage(res.internalMessage);
        return;
      }
      console.log(res.data);
      setPrintContent(res.data);
      setShowPrint(true);
    }).catch(error => {
      AlertMessages.getErrorMessage(error.message);
    });
  }

  const getPrintContent = (printRes: TokenPrintModel, token: string) => {
    return (
      <Row>
        <Col span={12} offset={8}>
          <div className='' id='printTable'>
            <table className='printable-slip'>
              <tr><td colSpan={3} className='align-center company-name'>{'Token'}</td></tr>
              <tr><td className='align-left'><span>Reader Id </span></td><td>:</td><td className='align-left'>{token}</td></tr>
              <tr><td className='align-left'><span>Employee Name </span></td><td>:</td><td className='align-left'>{printRes.employeeName}</td></tr>
              <tr><td className='align-left'><span>Date & Time</span></td><td>:</td><td className='align-left'>{new Date().toLocaleDateString() + ' ' + new Date().getHours() + ':' + new Date().getMinutes() + ' HRS'}</td></tr>
              <tr><td className='align-left'><span>Item Name</span></td><td>:</td><td className='align-left'>{printRes.freebieCategory}</td></tr>
              <tr><td className='align-left'><span>Quantity</span></td><td>:</td><td className='align-left'>1</td></tr>
              <tr><td className='align-left'><span>Amount</span></td><td>:</td><td className='align-left'>{printRes.price}</td></tr>
              <br />
            </table>
            <span>Note:Don't waste food someone is sleeping empty stomach</span>
          </div>
        </Col>
      </Row>
    )
  }

  const printSlip = () => {
    // Loading image lazy
    setTimeout(() => {
      readyThePrintContent();
    }, 500);
  }

  const readyThePrintContent = () => {
    const divContents = document.getElementById('printTable').innerHTML;
    const element = window.open('', '', 'height=700, width=1000');
    element.document.write(divContents);
    getCssFromComponent(document, element.document);
    element.document.close();
    setTimeout(() => {
      element.print();
    }, 500);
  }

  const changeToken = (scannedToken: string) => {
    setToken(scannedToken);
    setPrintContent(undefined);
    setShowPrint(false);
    console.log(scannedToken);
    if (scannedToken) {
      scanToken(scannedToken);
    }
    return;
  }
  return (
    <div>
      <Card title='Token Scanning' size='small' style={{ width: '100%' }}>
        <Input placeholder="Scan Token" style={{ width: '40%', margin: 10 }} onChange={e => changeToken(e.target.value)} defaultValue={token} />
        <br />
        {showPrint && printContent ?
          <>
            <Divider orientation="center">Employee Token</Divider>
            {getPrintContent(printContent, token)}{printSlip()}
          </> : ''
        }
      </Card>
    </div>
  );
}

export default ScanTokenForm;