'use client'

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Image from '@tiptap/extension-image'
import Link from '@tiptap/extension-link'
import Placeholder from '@tiptap/extension-placeholder'
import { FaBold, FaImage, FaItalic, FaListOl, FaListUl, FaStrikethrough, FaUnderline } from 'react-icons/fa'

const CustomCKEditor = (props: any) => {
  const {
    values,
    fieldName,
    setFieldValue,
    customSetterFun,
    placeholder = 'Enter content',
    noImage = false,
  } = props

  const content = fieldName ? values?.[fieldName] : values

  const editor = useEditor({
    immediatelyRender: false,
    extensions: [
      StarterKit,
      Link.configure({ openOnClick: false }),
      Placeholder.configure({ placeholder }),
      ...(noImage ? [] : [Image]),
    ],
    content: content || '',
    onUpdate: ({ editor }) => {
      const html = editor.getHTML()
      setFieldValue?.(fieldName, html)
      customSetterFun?.(html)
    },
  })

  if (!editor) return null

  return (
    <div className="border rounded-md p-2">
      {/* Toolbar */}
      <div className="flex flex-wrap gap-2 border-b pb-2 mb-2">
        <button onClick={() => editor.chain().focus().toggleBold().run()} className="editor-btn"><FaBold /></button>
        <button onClick={() => editor.chain().focus().toggleItalic().run()} className="editor-btn"><FaItalic /></button>
        {/* <button onClick={() => editor.chain().focus().toggleUnderline?.().run()} className="editor-btn"><FaUnderline /></button> */}
        <button onClick={() => editor.chain().focus().toggleStrike().run()} className="editor-btn"><FaStrikethrough /></button>
        <button onClick={() => editor.chain().focus().toggleBulletList().run()} className="editor-btn"><FaListUl /></button>
        <button onClick={() => editor.chain().focus().toggleOrderedList().run()} className="editor-btn"><FaListOl /></button>

        {!noImage && (
          <button
            onClick={() => {
              const url = prompt('Enter image URL')
              if (url) editor.chain().focus().setImage({ src: url }).run()
            }}
            className="editor-btn"
          >
            <FaImage />
          </button>
        )}
      </div>

      {/* Editor */}
      <EditorContent editor={editor} className="min-h-[150px]" />
    </div>
  )
}

export default CustomCKEditor