import type { ComponentProps } from "react"
import { ContentEditable } from "@lexical/react/LexicalContentEditable"
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
import { cn } from "@workspace/ui/lib/utils"

import { LexicalActionTree } from "./actions-view"
import { useLexicalActions } from "./actions-context"
import { LexicalActionRuntimeProvider } from "./toolbar"
import { useLexicalMessage } from "./i18n"
import { lexicalMessages } from "./messages"

export interface LexicalContentProps {
  className?: string
  placeholder?: string
}

export type LexicalFooterProps = ComponentProps<"div">

export function LexicalContent({
  className,
  placeholder,
}: LexicalContentProps) {
  const resolvedPlaceholder = useLexicalMessage(
    placeholder ?? lexicalMessages.contentPlaceholder
  )

  return (
    <div className="relative">
      <RichTextPlugin
        contentEditable={
          <ContentEditable
            aria-placeholder={resolvedPlaceholder}
            placeholder={
              <div
                data-slot="lexical-placeholder"
                className="pointer-events-none absolute start-3 top-4 text-sm text-muted-foreground"
              >
                {resolvedPlaceholder}
              </div>
            }
            className={cn("min-h-52 px-3 py-2 text-sm outline-none", className)}
          />
        }
        ErrorBoundary={LexicalErrorBoundary}
      />
    </div>
  )
}

export function LexicalFooter({
  className,
  children,
  ...props
}: LexicalFooterProps) {
  const actions = useLexicalActions("footer")

  if (actions.length === 0 && children == null) return null

  return (
    <LexicalActionRuntimeProvider>
      <div
        className={cn("flex items-center gap-1 border-t px-3 py-2", className)}
        {...props}
      >
        <LexicalActionTree items={actions} />
        {children}
      </div>
    </LexicalActionRuntimeProvider>
  )
}