import React, { useRef, forwardRef } from 'react';
import { makeStyles } from '@material-ui/core';
import { QRCode } from 'react-qrcode-logo';
import PrintIcon from '@material-ui/icons/Print';
import HighlightOffIcon from '@material-ui/icons/HighlightOff';
import { useReactToPrint } from 'react-to-print';
import { getSentenceCaseText } from 'utils/textOperations';
import Modal from '../Modal';
import StandardButton from '../Button';

const ComponentToPrint = forwardRef(({ style, url, queueName }, ref) => {
  return (
    <div className={style} ref={ref}>
      <h1>
        <u>{getSentenceCaseText(queueName)}</u>
      </h1>
      <span>Scan this QR to get your position in the line</span>
      <QRCode value={url} />
      <p style={{ textAlign: 'center' }}>
        {'or visit '}
        <a href={url} target="_blank" rel="noopener noreferrer">
          {url}
        </a>
      </p>
    </div>
  );
});

export const QrCode = ({ queueName, tourTag, handleModalClose }) => {
  const componentPrintRef = useRef();

  const handlePrint = useReactToPrint({
    content: () => componentPrintRef.current,
  });

  const styles = makeStyles(() => {
    return {
      centered: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
        width: '100%',
        height: '80%',
      },
      actionContainer: {
        display: 'flex',
        justifyContent: 'space-evenly',
        width: '90%',
      },
    };
  })();

  const CloseButton = ({ handleModalCloseHandler }) => {
    if (handleModalCloseHandler) {
      return (
        <StandardButton onClick={handleModalCloseHandler} icon={<HighlightOffIcon />} outlined>
          Close
        </StandardButton>
      );
    }
    return <></>;
  };

  return (
    <div className={styles['centered']}>
      <ComponentToPrint
        style={styles['centered']}
        url={`${window.location.origin}/j/${queueName}`}
        queueName={queueName}
        ref={componentPrintRef}
      />
      <div
        reactour-selector={tourTag}
        className={handleModalClose ? styles['actionContainer'] : null}
      >
        <StandardButton onClick={handlePrint} icon={<PrintIcon />}>
          Print
        </StandardButton>
        <CloseButton handleModalCloseHandler={handleModalClose} />
      </div>
    </div>
  );
};

const QrCodeModal = (props) => {
  const { queueName, show, onClose } = props;
  const handleModalClose = () => onClose(false);
  return (
    <Modal open={queueName ? show : !show} onClose={handleModalClose}>
      <QrCode queueName={queueName} handleModalClose={handleModalClose} />
    </Modal>
  );
};

export default QrCodeModal;