/* eslint-disable prefer-destructuring */
/* eslint no-dupe-keys: 0, no-mixed-operators: 0 */
import React from 'react';
import { InputItem, Icon } from 'antd-mobile-v2';
import { Document, Page, pdfjs } from 'react-pdf';
import 'antd-mobile-v2/dist/antd-mobile.css';
import * as commonUtils from '../../utils/utils';
import pdfstyles from '../printpdf.less';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

class CommobilePrintPdf extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pageNumber: 1,
      numPages: 1,
    };
  }

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  };

  onPageNumberChange = (e) => {
    let value = commonUtils.convertStrToNumber(e);
    value = value <= 0 ? 1 : value;
    value = value >= this.state.numPages ? this.state.numPages : value;
    this.setState({ pageNumber: value });
  };
  lastPage = () => {
    if (this.state.pageNumber === 1) {
      return;
    }
    const page = this.state.pageNumber - 1;
    this.setState({ pageNumber: page });
  }
  nextPage = () => {
    if (this.state.pageNumber === this.state.numPages) {
      return;
    }
    const page = this.state.pageNumber + 1;
    this.setState({ pageNumber: page });
  }
  render() {
    const {
      pageNumber, numPages,
    } = this.state;
    const { urlPrint } = this.props;
    const pageWidth = commonUtils.isNotEmptyNumber(document.body.clientWidth) ? document.body.clientWidth : 360;
    return (
      <div
        className={pdfstyles.view}
      >
        <div className={pdfstyles.pageContainer}>
          <Document
            file={urlPrint}
            onLoadSuccess={this.onDocumentLoadSuccess}
          >
            <Page pageNumber={pageNumber} width={pageWidth} />
          </Document>
        </div>
        <div className={pdfstyles.pageTool}>
          <div className={pdfstyles.left}>
            <Icon size="md" type="left" onClick={this.lastPage} />
          </div>
          <InputItem
            value={pageNumber}
            onChange={e => this.onPageNumberChange(e)}
            type="number"
          /><div className={pdfstyles.numPages}> / {numPages}</div>
          <div className={pdfstyles.right}>
            <Icon size="md" type="right" onClick={this.nextPage} />
          </div>
        </div>
        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
        <span className="pdfClose">  <a onClick={() => window.history.back(-1)} > <Icon type="cross-circle-o" /></a>  </span>
      </div>
    );
  }
}

export default CommobilePrintPdf;