import {
  createShapeId,
  Editor,
  Tldraw,
  TLGeoShape,
  TLShapePartial,
} from "tldraw"
import { useEffect, useRef } from "react"

export function Inbox() {
  const editorRef = useRef<Editor | null>(null)

  const updateEmails = async (editor: Editor) => {
    try {
      const response = await fetch("https://jeffemmett-canvas.web.val.run", {
        method: "GET",
      })
      const messages = (await response.json()) as {
        id: string
        from: string
        subject: string
        text: string
      }[]

      for (let i = 0; i < messages.length; i++) {
        const message = messages[i]
        const messageId = message.id
        const parsedEmailName =
          message.from.match(/^([^<]+)/)?.[1]?.trim() ||
          message.from.match(/[^<@]+(?=@)/)?.[0] ||
          message.from
        const messageText = `from: ${parsedEmailName}\nsubject: ${message.subject}\n\n${message.text}`
        const shapeWidth = 500
        const shapeHeight = 300
        const spacing = 50
        const shape: TLShapePartial<TLGeoShape> = {
          id: createShapeId(),
          type: "geo",
          x: shapeWidth * (i % 5) + spacing * (i % 5),
          y: shapeHeight * Math.floor(i / 5) + spacing * Math.floor(i / 5),
          isLocked: false,
          props: {
            w: shapeWidth,
            h: shapeHeight,
            fill: "solid",
            color: "white",
            geo: "rectangle",
            richText: [] as any
          },
          meta: {
            id: messageId,
            text: messageText, // Store text in meta instead of props
          },
        }
        let found = false
        for (const s of editor.getCurrentPageShapes()) {
          if (s.meta.id === messageId) {
            found = true
            break
          }
        }
        if (!found) {
          editor.createShape(shape)
        }
      }
    } catch (error) {
      console.error("Error fetching data:", error)
    }
  }

  useEffect(() => {
    const intervalId = setInterval(() => {
      if (editorRef.current) {
        updateEmails(editorRef.current)
      }
    }, 5 * 1000)

    return () => clearInterval(intervalId)
  }, [])

  return (
    <div className="tldraw__editor">
      <Tldraw
        onMount={(editor: Editor) => {
          editorRef.current = editor
          updateEmails(editor)
        }}
      />
    </div>
  )
}