import {
  BoldIcon,
  ItalicIcon,
  LucideIcon,
  StrikethroughIcon,
  UnderlineIcon,
  CheckSquare,
  Heading2,
  Heading3,
  Heading4,
  ListOrdered,
  SeparatorHorizontalIcon,
  Heading5,
  Heading6,
  QuoteIcon,
  TypeIcon,
} from "lucide-react";
import { EditorInstance } from "novel";

export type SelectorItem = {
  name: string;
  icon: LucideIcon;
  inline?: boolean;
  command: (editor: EditorInstance) => void;
  isActive: (editor: EditorInstance) => boolean;
  canRun?: (editor: EditorInstance) => boolean;
};

export const selectionItems: SelectorItem[] = [
  {
    name: "bold",
    isActive: (editor) => editor.isActive("bold"),
    command: (editor) => editor.chain().focus().toggleBold().run(),
    icon: BoldIcon,
    inline: true,
    canRun: (editor) => !editor.can().chain().focus().toggleBold().run(),
  },
  {
    name: "italic",
    isActive: (editor) => editor.isActive("italic"),
    command: (editor) => editor.chain().focus().toggleItalic().run(),
    icon: ItalicIcon,
    inline: true,
    canRun: (editor) => !editor.can().chain().focus().toggleItalic().run(),
  },
  {
    name: "underline",
    isActive: (editor) => editor.isActive("underline"),
    command: (editor) => editor.chain().focus().toggleUnderline().run(),
    icon: UnderlineIcon,
    inline: true,
    canRun: (editor) => !editor.can().chain().focus().toggleUnderline().run(),
  },
  {
    name: "strike",
    isActive: (editor) => editor.isActive("strike"),
    command: (editor) => editor.chain().focus().toggleStrike().run(),
    icon: StrikethroughIcon,
    inline: true,
    canRun: (editor) => !editor.can().chain().focus().toggleStrike().run(),
  },

  // blocks
  {
    name: "Text",
    icon: TypeIcon,
    command: (editor) => editor.chain().focus().clearNodes().run(),
    isActive: (editor) => editor.isActive("paragraph"), //node?.type?.name === "paragraph",
  },
  {
    name: "Überschrift",
    icon: Heading2,
    command: (editor) =>
      editor.chain().focus().clearNodes().toggleHeading({ level: 2 }).run(),
    isActive: (editor) => editor.isActive("heading", { level: 2 }),
  },
  {
    name: "Überschrift 3",
    icon: Heading3,
    command: (editor) =>
      editor.chain().focus().clearNodes().toggleHeading({ level: 3 }).run(),
    isActive: (editor) => editor.isActive("heading", { level: 3 }),
  },
  {
    name: "Überschrift 4",
    icon: Heading4,
    command: (editor) =>
      editor.chain().focus().clearNodes().toggleHeading({ level: 4 }).run(),
    isActive: (editor) => editor.isActive("heading", { level: 4 }),
  },
  {
    name: "Überschrift 5",
    icon: Heading5,
    command: (editor) =>
      editor.chain().focus().clearNodes().toggleHeading({ level: 5 }).run(),
    isActive: (editor) => editor.isActive("heading", { level: 5 }),
  },
  {
    name: "Überschrift 6",
    icon: Heading6,
    command: (editor) =>
      editor.chain().focus().clearNodes().toggleHeading({ level: 6 }).run(),
    isActive: (editor) => editor.isActive("heading", { level: 6 }),
  },
  {
    name: "To-do List",
    icon: CheckSquare,
    command: (editor) =>
      editor.chain().focus().clearNodes().toggleTaskList().run(),
    isActive: (editor) => editor.isActive("taskItem"),
  },
  {
    name: "Bullet List",
    icon: ListOrdered,
    command: (editor) =>
      editor.chain().focus().clearNodes().toggleBulletList().run(),
    isActive: (editor) => editor.isActive("bulletList"),
  },
  {
    name: "Numbered List",
    icon: ListOrdered,
    command: (editor) =>
      editor.chain().focus().clearNodes().toggleOrderedList().run(),
    isActive: (editor) => editor.isActive("orderedList"),
  },
  {
    name: "Quote",
    icon: QuoteIcon,
    command: (editor) =>
      editor.chain().focus().clearNodes().toggleBlockquote().run(),
    isActive: (editor) => editor.isActive("blockquote"),
  },
  {
    name: "Seperator",
    icon: SeparatorHorizontalIcon,
    command: (editor) => editor.chain().focus().setHorizontalRule().run(),
    isActive: (editor) => editor.isActive("horizontalRule"),
  },
];
