import Editor from "@monaco-editor/react"
import { useEffect, useMemo, useState } from "react"

import { useTheme } from "@/components/theme-provider"
import { Skeleton } from "@/components/ui/skeleton"
import { monacoFontFamily, setupMonaco } from "./monacoSetup"

/**
 * The embedded Python editor. Highlighting and bracket handling only: what the
 * code actually does is checked by the engine, which reports load and run
 * errors back onto the node.
 */
export default function NodeEditor({
  value,
  onChange,
}: {
  value: string
  onChange: (next: string) => void
}) {
  const { resolvedTheme } = useTheme()
  const [ready, setReady] = useState(false)

  useEffect(() => {
    setupMonaco()
    setReady(true)
  }, [])

  const fontFamily = useMemo(() => (ready ? monacoFontFamily() : ""), [ready])

  if (!ready) return <Skeleton className="h-full w-full rounded-md" />

  return (
    <Editor
      language="python"
      theme={resolvedTheme === "dark" ? "fluksio-dark" : "fluksio-light"}
      value={value}
      onChange={(next) => onChange(next ?? "")}
      loading={<Skeleton className="h-full w-full rounded-md" />}
      options={{
        fontFamily,
        fontSize: 13,
        minimap: { enabled: false },
        scrollBeyondLastLine: false,
        automaticLayout: true,
        tabSize: 4,
        lineNumbersMinChars: 3,
        padding: { top: 12, bottom: 12 },
        renderLineHighlight: "line",
        overviewRulerLanes: 0,
        scrollbar: { verticalScrollbarSize: 8, horizontalScrollbarSize: 8 },
      }}
    />
  )
}