import useAnimationFrame from '@/lib/useAnimationFrame';
import { court, lightLine, smoke } from '@/styles/colors';
import styled from '@emotion/styled';
import { useCallback, useRef } from 'react';
import OnScreenOnly from '../OnScreenOnly';

const GridAnimationWrapper = styled.div`
  position: relative;
  background: ${lightLine};
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  > div {
    width: 100%;
    height: 100%;
  }
`;

const AutomationCanvas = styled.canvas`
  transform-origin: 0 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
`;

const ParameterAutomation = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useAnimationFrame(
    useCallback(() => {
      const canvas = canvasRef.current;
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      const now = Date.now();

      ctx.clearRect(0, 0, canvas.width, canvas.height);
      const idealWidth = Math.ceil(canvas.parentElement!.clientWidth * window.devicePixelRatio);
      const idealHeight = Math.ceil(canvas.parentElement!.clientHeight * window.devicePixelRatio);
      if (canvas.width !== idealWidth || canvas.height !== idealHeight) {
        canvas.width = idealWidth;
        canvas.height = idealHeight;
        canvas.setAttribute('style', `transform: scale(${1 / window.devicePixelRatio})`);
      }
      ctx.fillStyle = smoke;
      ctx.save();

      ctx.translate(idealWidth / 2, idealHeight / 2 - idealHeight / 6);
      const x = (now / 2000) % 1;
      ctx.rotate(((x < 0.5 ? x * 4 : 4 * (1 - x)) - 1) * 0.4 + Math.sin(x * Math.PI * 2) * 0.4);

      ctx.beginPath();
      ctx.arc(0, 0, idealHeight / 6, 0, 2 * Math.PI);
      ctx.closePath();
      ctx.fill();

      ctx.fillStyle = 'white';
      ctx.fillRect(-2 * window.devicePixelRatio, idealHeight / -6, 4 * window.devicePixelRatio, idealHeight / 6);

      ctx.restore();

      ctx.save();

      ctx.strokeStyle = smoke;
      ctx.beginPath();
      ctx.moveTo(0, (idealHeight * 5) / 6);
      ctx.lineTo(idealWidth / 2, (idealHeight * 4) / 6);
      ctx.lineTo(idealWidth, (idealHeight * 5) / 6);
      ctx.lineTo(idealWidth, idealHeight);
      ctx.lineTo(0, idealHeight);
      ctx.closePath();
      ctx.clip();

      ctx.fillStyle = court;
      ctx.fillRect(0, 0, idealWidth, idealHeight);
      ctx.fillStyle = '#fff';
      ctx.fillRect(x * idealWidth, 0, 4 * devicePixelRatio, idealHeight);
      ctx.restore();

      // const y = (((x < 0.5 ? x * 4 : 4 * (1 - x)) - 1) * idealHeight) / -12;
      // ctx.beginPath();
      // ctx.arc(x * idealWidth, y + (idealHeight * 4.5) / 6, 10 * window.devicePixelRatio, 0, 2 * Math.PI);
      // ctx.closePath();
      // ctx.fill();
    }, [])
  );

  return (
    <GridAnimationWrapper>
      <OnScreenOnly>
        <AutomationCanvas ref={canvasRef} />
      </OnScreenOnly>
    </GridAnimationWrapper>
  );
};

export default ParameterAutomation;