import { Extension } from "@tiptap/core"
import {
  applyDocsBulletStyle,
  applyDocsChecklistStyle,
  applyDocsOrderedStyle,
  continueDocsOrderedList,
  restartDocsOrderedList,
  setDocsOrderedListStart,
} from "@/lib/drive/docs-list-actions"
import {
  DOCS_DEFAULT_BULLET_STYLE,
  DOCS_DEFAULT_ORDERED_STYLE,
  normalizeBulletStyleId,
  normalizeOrderedStyleId,
  type DocsBulletStyleId,
  type DocsChecklistStyleId,
  type DocsOrderedStyleId,
} from "@/lib/drive/docs-list-styles"

declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    docsListStyles: {
      applyDocsBulletStyle: (styleId: DocsBulletStyleId) => ReturnType
      applyDocsOrderedStyle: (styleId: DocsOrderedStyleId) => ReturnType
      applyDocsChecklistStyle: (styleId: DocsChecklistStyleId) => ReturnType
      restartDocsOrderedList: () => ReturnType
      continueDocsOrderedList: () => ReturnType
      setDocsOrderedListStart: (start: number) => ReturnType
    }
  }
}

export const DocsListStyles = Extension.create({
  name: "docsListStyles",

  addGlobalAttributes() {
    return [
      {
        types: ["bulletList"],
        attributes: {
          bulletStyle: {
            default: DOCS_DEFAULT_BULLET_STYLE,
            parseHTML: (element) =>
              normalizeBulletStyleId(element.getAttribute("data-bullet-style")),
            renderHTML: (attributes) => {
              const style = normalizeBulletStyleId(attributes.bulletStyle)
              return {
                "data-bullet-style": style,
                class: `docs-bullet-list docs-bullet-list--${style}`,
              }
            },
          },
        },
      },
      {
        types: ["orderedList"],
        attributes: {
          orderedStyle: {
            default: DOCS_DEFAULT_ORDERED_STYLE,
            parseHTML: (element) =>
              normalizeOrderedStyleId(element.getAttribute("data-ordered-style")),
            renderHTML: (attributes) => {
              const style = normalizeOrderedStyleId(attributes.orderedStyle)
              return {
                "data-ordered-style": style,
                class: `docs-ordered-list docs-ordered-list--${style}`,
              }
            },
          },
        },
      },
      {
        types: ["taskList"],
        attributes: {
          checklistStyle: {
            default: "simple",
            parseHTML: (element) =>
              element.getAttribute("data-checklist-style") === "strikethrough"
                ? "strikethrough"
                : "simple",
            renderHTML: (attributes) => {
              const style = (attributes.checklistStyle as DocsChecklistStyleId | undefined) ?? "simple"
              return {
                "data-checklist-style": style,
                class: `docs-task-list docs-task-list--${style}`,
              }
            },
          },
        },
      },
    ]
  },

  addCommands() {
    return {
      applyDocsBulletStyle:
        (styleId) =>
        ({ editor }) =>
          applyDocsBulletStyle(editor, styleId),
      applyDocsOrderedStyle:
        (styleId) =>
        ({ editor }) =>
          applyDocsOrderedStyle(editor, styleId),
      applyDocsChecklistStyle:
        (styleId) =>
        ({ editor }) =>
          applyDocsChecklistStyle(editor, styleId),
      restartDocsOrderedList:
        () =>
        ({ editor }) =>
          restartDocsOrderedList(editor),
      continueDocsOrderedList:
        () =>
        ({ editor }) =>
          continueDocsOrderedList(editor),
      setDocsOrderedListStart:
        (start) =>
        ({ editor }) =>
          setDocsOrderedListStart(editor, start),
    }
  },
})