'use client'

import * as React from 'react'
import type { Editor } from '@tiptap/react'
import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
import { canInsertContentEditorMediaPlaceholder } from '@admin/utils/editor/can-insert-content-editor-media-placeholder'
import { CONTENT_EDITOR_MEDIA_SHORTCUT_KEY } from '@admin/utils/editor/content-editor-media-shortcut-key'
import { insertContentEditorMediaPlaceholder } from '@admin/utils/editor/insert-content-editor-media-placeholder'
import { isContentEditorMediaPlaceholderActive } from '@admin/utils/editor/is-content-editor-media-placeholder-active'
import { useHotkeys } from 'react-hotkeys-hook'

export interface UseContentEditorMediaInsertionOptions {
  editor?: Editor | null
  onInserted?: () => void
}

export function useContentEditorMediaInsertion({
  editor: providedEditor,
  onInserted
}: UseContentEditorMediaInsertionOptions = {}) {
  const { editor } = useTiptapEditor(providedEditor)
  const canInsert = canInsertContentEditorMediaPlaceholder(editor)
  const isActive = isContentEditorMediaPlaceholderActive(editor)
  const isVisible = Boolean(editor?.isEditable)

  const insertMedia = React.useCallback(() => {
    const success = insertContentEditorMediaPlaceholder(editor)
    if (success) {
      onInserted?.()
    }
    return success
  }, [editor, onInserted])

  useHotkeys(
    CONTENT_EDITOR_MEDIA_SHORTCUT_KEY,
    (event) => {
      event.preventDefault()
      insertMedia()
    },
    {
      enabled: isVisible && canInsert,
      enableOnContentEditable: true,
      enableOnFormTags: true
    }
  )

  return {
    canInsert,
    insertMedia,
    isActive,
    isVisible,
    label: 'Add media',
    shortcutKeys: CONTENT_EDITOR_MEDIA_SHORTCUT_KEY
  }
}