import "react-image-lightbox/style.css"; // This only needs to be imported once in your app
import React = require("react");
import { observer } from "mobx-react";
import "react-pdf/dist/Page/AnnotationLayer.css";

interface IProps {
  Height: number;
  Width: number;
  X: number;
  Y: number;
}

/**
 * Sticky, also known as area highlighting, is used to highlight large selection of the PDF file.
 * Improvements that could be made: maybe store line array and store that somewhere for future rerendering.
 *
 * Written By: Andrew Kim
 */
@observer
export class Sticky extends React.Component<IProps> {
  private initX: number = 0;
  private initY: number = 0;

  private _ref = React.createRef<HTMLCanvasElement>();
  private ctx: any; //context that keeps track of sticky canvas

  /**
   * drawing. Registers the first point that user clicks when mouse button is pressed down on canvas
   */
  drawDown = (e: React.PointerEvent) => {
    if (this._ref.current) {
      this.ctx = this._ref.current.getContext("2d");
      let mouse = e.nativeEvent;
      this.initX = mouse.offsetX;
      this.initY = mouse.offsetY;
      this.ctx.beginPath();
      this.ctx.lineTo(this.initX, this.initY);
      this.ctx.strokeStyle = "black";
      document.addEventListener("pointermove", this.drawMove);
      document.addEventListener("pointerup", this.drawUp);
    }
  };

  //when user drags
  drawMove = (e: PointerEvent): void => {
    //x and y mouse movement
    let x = (this.initX += e.movementX),
      y = (this.initY += e.movementY);
    //connects the point
    this.ctx.lineTo(x, y);
    this.ctx.stroke();
  };

  /**
   * when user lifts the mouse, the drawing ends
   */
  drawUp = (e: PointerEvent) => {
    this.ctx.closePath();
    console.log(this.ctx);
    document.removeEventListener("pointermove", this.drawMove);
  };

  render() {
    return (
      <div onPointerDown={this.drawDown}>
        <canvas
          ref={this._ref}
          height={this.props.Height}
          width={this.props.Width}
          style={{
            position: "absolute",
            top: "20px",
            left: "0px",
            zIndex: 1,
            background: "yellow",
            transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
            opacity: 0.4
          }}
        />
      </div>
    );
  }
}