import React, { Component } from "react";

interface AppState {
  color: string;
}

class App extends Component<{}, AppState> {

  canvasRef: React.RefObject<HTMLCanvasElement>;

  constructor(props: {}) {
    super(props);
    this.canvasRef = React.createRef();
    this.state = {
      color: "blue",
    };
  }

  componentDidMount() {
    this.updateCanvasImage();
  }

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

    context.fillStyle = this.state.color;
    context.fillRect(50, 50, 150, 100);
  }

  handleButtonClick = () => {
    alert("Ouch!");
  };

  render() {
    // We can use { and } - just like with the attributes - to put text on the screen
    return (
      <div>
        <button onClick={this.handleButtonClick}>Click Me!</button>
        <p>Selected Color: {this.state.color}</p>
        <canvas ref={this.canvasRef} width="300" height="300" />
      </div>
    );
  }

}

export default App;