import { useRef, useEffect } from "hono/jsx"
import type { ImageOverlay, OverlayItem, TextOverlay } from "./types"

interface VideoOverlayProps {
  overlays: OverlayItem[]
  children: any // ick
  isRecording?: boolean
}

export function VideoOverlay({ overlays, children, isRecording }: VideoOverlayProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)

  const drawOverlays = () => {
    const canvas = canvasRef.current
    const container = containerRef.current
    if (!canvas || !container) return

    const video = container.querySelector("video")
    if (!video) return

    const ctx = canvas.getContext("2d")
    if (!ctx) return

    // Match canvas size to video's rendered size
    const rect = video.getBoundingClientRect()
    canvas.width = rect.width
    canvas.height = rect.height

    // Clear canvas
    // ctx.clearRect(0, 0, canvas.width, canvas.height)
    // ctx.fillStyle = "green"
    // const xmin = 250
    // const ymin = 250
    // const xmax = 750
    // const ymax = 750
    // const x = (xmin / 1000) * ctx.canvas.width
    // const y = (ymin / 1000) * ctx.canvas.height
    // const width = ((xmax - xmin) / 1000) * ctx.canvas.width
    // const height = ((ymax - ymin) / 1000) * ctx.canvas.height
    // ctx.fillRect(x, y, width, height)

    // Draw overlays
    for (const overlay of overlays) {
      if (overlay.type === "text") {
        drawText(ctx, overlay)
      } else if (overlay.type === "image") {
        drawImage(ctx, overlay)
      }
    }
  }

  // Redraw when overlay data changes or recording state changes
  useEffect(() => {
    setTimeout(() => {
      drawOverlays()
    }, 1000)
  }, [overlays, isRecording])

  // Redraw on window resize (video size might change)
  useEffect(() => {
    window.addEventListener("resize", drawOverlays)
    return () => window.removeEventListener("resize", drawOverlays)
  }, [])

  const drawText = (ctx: CanvasRenderingContext2D, overlay: TextOverlay) => {
    const {
      xmin,
      ymin,
      xmax,
      ymax,
      text,
      fontSize = 20,
      fontFamily = "Arial",
      color = "white",
      strokeColor = "black",
      strokeWidth = 2,
    } = overlay

    ctx.font = `${fontSize}px ${fontFamily}`
    ctx.fillStyle = color
    ctx.strokeStyle = strokeColor
    ctx.lineWidth = strokeWidth
    const x = (xmin / 1000) * ctx.canvas.width
    const y = (ymin / 1000) * ctx.canvas.height
    const width = ((xmax - xmin) / 1000) * ctx.canvas.width
    const height = ((ymax - ymin) / 1000) * ctx.canvas.height
    ctx.strokeText(text, x, y)
    ctx.fillText(text, x, y)
  }

  const drawImage = (ctx: CanvasRenderingContext2D, overlay: ImageOverlay) => {
    const { xmin, ymin, xmax, ymax, src } = overlay

    const img = new Image()
    img.crossOrigin = "anonymous"

    img.onload = () => {
      const x = (xmin / 1000) * ctx.canvas.width
      const y = (ymin / 1000) * ctx.canvas.height
      const width = ((xmax - xmin) / 1000) * ctx.canvas.width
      const height = ((ymax - ymin) / 1000) * ctx.canvas.height
      ctx.drawImage(img, x, y, width, height)
    }

    img.src = src
  }

  return (
    <div ref={containerRef} class="relative inline-block">
      {children}
      <canvas ref={canvasRef} class="absolute top-0 left-0 pointer-events-none z-10" />
    </div>
  )
}
