import type { Editor } from "@tiptap/react"
import { useEffect, useState } from "react"
import { Dropdown } from "./Dropdown"

interface LineHeightControlProps {
  editor: Editor
}

const lineHeightOptions = [
  { label: "100%", value: "100%" },
  { label: "115%", value: "115%" },
  { label: "150%", value: "150%" },
  { label: "200%", value: "200%" },
]

export function LineHeightControl({ editor }: React.PropsWithChildren<LineHeightControlProps>) {
  const [lineHeight, setLineHeight] = useState("100%")

  // Get current line height from editor
  useEffect(() => {
    const updateLineHeight = () => {
      const currentNode = editor.state.selection.$from.node()
      if (currentNode?.attrs?.lineHeight) {
        setLineHeight(currentNode.attrs.lineHeight)
      }
    }

    editor.on("selectionUpdate", updateLineHeight)
    updateLineHeight()

    return () => {
      editor.off("selectionUpdate", updateLineHeight)
    }
  }, [editor])

  const handleLineHeightChange = (value: string) => {
    setLineHeight(value)
    editor.chain().focus().setLineHeight(value).run()
  }

  return (
    <Dropdown
      options={lineHeightOptions}
      value={lineHeight}
      onChange={handleLineHeightChange}
      placeholder="Line Height"
    />
  )
}