import React, {Component} from 'react';
import ColorTitle from "./ColorTitle";

interface TitledCanvasProps {
    color: string  // The color that this canvas should be.
}

class TitledCanvas extends Component<TitledCanvasProps, {}> {

    canvasRef: any // Could write React.RefObject<HTMLCanvasElement> if we wanted.

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

    componentDidUpdate() {
        this.updateCanvasImage();
    }

    componentDidMount() {
        this.updateCanvasImage();
    }

    updateCanvasImage() {
        let canvas = this.canvasRef.current;
        let context = canvas.getContext("2d");
        context.fillStyle = this.props.color;
        context.fillRect(50, 50, 150, 100);
    }

    render() {
        return (
            <div>
                <ColorTitle color={this.props.color} />
                <canvas ref={this.canvasRef} width="500" height="500" />
            </div>
        );
    }

}

export default TitledCanvas;