import { useRef, useMemo, useEffect, useState } from "react";

import { useCamera } from "../hooks/useCamera";

import { useAnimationLoop } from "../hooks/useAnimationLoop";

import { buildCSSFilter, buildLUT } from "../lib/filters";

import type { FilterState } from "../lib/types";

interface CameraViewProps {

  filterState: FilterState;

}

export function CameraView({ filterState }: CameraViewProps) {

  const { videoRef, error, isReady } = useCamera();

  const canvasRef = useRef<HTMLCanvasElement>(null);

  const [videoDimensions, setVideoDimensions] = useState({ w: 1280, h: 720 });

  useEffect(() => {

    const video = videoRef.current;

    if (!video) return;

    function onMeta() {

      setVideoDimensions({ w: video!.videoWidth, h: video!.videoHeight });

    }

    video.addEventListener("loadedmetadata", onMeta);

    return () => video.removeEventListener("loadedmetadata", onMeta);

  }, [videoRef]);

  const cssFilter = useMemo(() => buildCSSFilter(filterState.basic), [filterState.basic]);

  const lut = useMemo(

    () => buildLUT(filterState.basic, filterState.curves),

    [filterState.basic, filterState.curves],

  );

  useAnimationLoop(() => {

    const video = videoRef.current;

    const canvas = canvasRef.current;

    if (!video || !canvas || !isReady || video.readyState < 2) return;

    const ctx = canvas.getContext("2d", { willReadFrequently: !lut.isIdentity });

    if (!ctx) return;

    canvas.width = videoDimensions.w;

    canvas.height = videoDimensions.h;

    ctx.filter = cssFilter;

    ctx.drawImage(video, 0, 0, videoDimensions.w, videoDimensions.h);

    if (!lut.isIdentity) {

      ctx.filter = "none";

      const imageData = ctx.getImageData(0, 0, videoDimensions.w, videoDimensions.h);

      const d = imageData.data;

      const lr = lut.r;

      const lg = lut.g;

      const lb = lut.b;

      for (let i = 0; i < d.length; i += 4) {

        d[i] = lr[d[i]];

        d[i + 1] = lg[d[i + 1]];

        d[i + 2] = lb[d[i + 2]];

      }

      ctx.putImageData(imageData, 0, 0);

    }

  });

  if (error) {

    return (

      <div className="camera-error">

        <p>{error}</p>

      </div>

    );

  }

  return (

    <div className="camera-view">

      <video

        ref={videoRef}

        autoPlay

        playsInline

        muted

        style={{ position: "absolute", width: 1, height: 1, opacity: 0, pointerEvents: "none" }}

      />

      <canvas ref={canvasRef} className="camera-canvas" />

    </div>

  );

}