import React, { Component } from 'react';

class App extends Component<{}, {}> {

  canvasRef: React.RefObject<HTMLCanvasElement>;

  constructor(props: {}) {
    super(props);
    this.canvasRef = React.createRef();
  }

  componentDidMount() {
    this.updateCanvasImage();
  }

  updateCanvasImage() {
    let canvas = this.canvasRef.current;
    if (canvas === null) return;
    let context = canvas.getContext("2d");
    if (context === null) return;

    context.fillStyle = "blue";
    context.fillRect(50, 50, 150, 100);
  }

  // For things like button handlers, we need to use arrow functions instead of regular functions.
  // The rule: Any time you pass a function as a value to something else, that function needs to
  //           be an arrow function.
  handleButtonClick = () => {
    alert("Ouch!"); // alert() is built into browsers - displays a pop-up message
  };

  render() {
    // We can only return one thing from render. So if we want to return more than one thing, we
    // wrap them together inside a <div>, and return the div.
    return (
      <div>
        <button onClick={this.handleButtonClick}>Click Me!</button>
        <canvas ref={this.canvasRef} width="300" height="300" />
      </div>
    );
  }

}

export default App;