import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class PdfPage extends Component {

  static propTypes = {
    page: PropTypes.number,
    scale: PropTypes.number,
    rotate: PropTypes.number,
    className: PropTypes.string,
    pdf: PropTypes.object,
    file: PropTypes.object,
  };

  componentDidMount() {
    this.props.pdf.getPage(this.props.page).then(this.renderPage);
  }


  componentWillReceiveProps(nextProps) {
    if(nextProps.pdf.fingerprint !==this.props.pdf.fingerprint) {
      nextProps.pdf.getPage(nextProps.page).then(this.renderPage);
    }
    if(nextProps.rotate !== this.props.rotate) {
      this.canvas.style.transform = `rotate(${nextProps.rotate}deg)`;
    }
  }

  renderPage = (pdfPage) => {
    if (pdfPage) {
      const canvasContext = this.canvas.getContext('2d');
      const { scale, rotate } = this.props;
      const viewport = pdfPage.getViewport(scale, rotate);
      this.canvas.height = viewport.height;
      this.canvas.width = viewport.width;
      pdfPage.render({ canvasContext, viewport });
    }
  }

  render() {
    return (
      <canvas ref={(canvas) => { this.canvas = canvas; }} className={this.props.className} />
    );
  }

}