import { useEffect, useRef } from 'react';
import { StyledAnimatedBg } from './styles/AnimatedBg.styled';

class AnimatedBgCanvas {
  private canvasElement: HTMLCanvasElement;
  private ctx: CanvasRenderingContext2D | null;
  private width = 0;
  private height = 0;

  constructor(canvasElement: HTMLCanvasElement) {
    this.canvasElement = canvasElement;
    this.ctx = canvasElement.getContext('2d');
  }

  clear() {
    this.ctx!.clearRect(0, 0, this.width, this.height);
  }

  init() {
    const canvasClientRect = this.canvasElement.getBoundingClientRect();

    this.width = canvasClientRect.width;
    this.height = canvasClientRect.height;

    this.canvasElement.width = this.width;
    this.canvasElement.height = this.height;
  }

  draw() {
    this.clear();

    this.ctx!.fillStyle = 'white';
    this.ctx!.beginPath();
    this.ctx!.arc(100, 100, 10, 0, Math.PI * 2);
    this.ctx!.fill();
  }
}

export default function AnimatedBg() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (canvasRef.current != null) {
      const animatedCanvas = new AnimatedBgCanvas(canvasRef.current);

      animatedCanvas.init();
      animatedCanvas.draw();
    }
  }, []);

  return <StyledAnimatedBg ref={canvasRef}></StyledAnimatedBg>;
}
