import { BulletList } from "@tiptap/extension-bullet-list"
import CharacterCount from "@tiptap/extension-character-count"
import Color from "@tiptap/extension-color"
import Image from "@tiptap/extension-image"
import Link from "@tiptap/extension-link"
import { ListItem } from "@tiptap/extension-list-item"
import { OrderedList } from "@tiptap/extension-ordered-list"
import TextAlign from "@tiptap/extension-text-align"
import { TextStyle } from "@tiptap/extension-text-style"
import Underline from "@tiptap/extension-underline"
import type { Extensions } from "@tiptap/react"
import StarterKit from "@tiptap/starter-kit"
import { ImageUploadNode } from "./components/image-upload/ImageUploadNodeExtension"
import { FontFamily } from "./extensions/FontFamily"
import { FontSize } from "./extensions/FontSize"
import { ImagePaste } from "./extensions/ImagePaste"
import { Indent } from "./extensions/Indent"
import { LineHeight } from "./extensions/LineHeight"

export const editorExtensions: Extensions = [
  StarterKit.configure({
    bulletList: false,
    orderedList: false,
    listItem: false,
  }),
  Underline,
  TextStyle,
  Color,
  TextAlign.configure({
    types: ["heading", "paragraph"],
  }),
  LineHeight.configure({
    types: ["heading", "paragraph"],
    heights: ["100%", "115%", "150%", "200%"],
    defaultHeight: "100%",
  }),
  Image.configure({
    inline: true,
    allowBase64: true,
  }),
  Link.configure({
    openOnClick: false,
    HTMLAttributes: {
      class: "text-blue-600 underline",
    },
  }),
  BulletList.configure({
    HTMLAttributes: {
      class: "list-disc",
    },
  }),
  OrderedList.configure({
    HTMLAttributes: {
      class: "list-decimal",
    },
  }),
  ListItem,
  CharacterCount.configure({
    limit: 10000, // Optional: set character limit
  }),
  Indent.configure({
    types: ["paragraph", "heading"],
    minLevel: 0,
    maxLevel: 5,
  }),
  FontSize.configure({
    types: ["textStyle"],
  }),
  FontFamily.configure({
    types: ["textStyle"],
  }),
  ImagePaste,
  ImageUploadNode.configure({
    accept: "image/*",
    maxSize: 5 * 1024 * 1024, // 5MB limit
    limit: 1,
    upload: async (file, _onProgress) => {
      // This is a placeholder upload function
      // In a real application, you would upload to your server
      return new Promise(resolve => {
        const reader = new FileReader()
        reader.onload = () => {
          resolve(reader.result as string)
        }
        reader.readAsDataURL(file)
      })
    },
    onError: error => {
      console.error("Upload failed:", error)
    },
    onSuccess: url => {
      console.log("Upload successful:", url)
    },
  }),
]

export const editorProps = {
  attributes: {
    class: "focus:outline-none",
  },
}