import { ReactNodeViewRenderer } from "@tiptap/react"
import { mergeAttributes } from "@tiptap/core"
import { TaskItemView } from "./components/task-item-view"
import { TaskItem as TiptapTaskItem } from "@tiptap/extension-task-item"

export const TaskItem = TiptapTaskItem.extend({
	name: "taskItem",

	draggable: true,

	addOptions() {
		return {
			...this.parent?.(),
			nested: true
		}
	},

	addAttributes() {
		return {
			checked: {
				default: false,
				keepOnSplit: false,
				parseHTML: element => {
					const dataChecked = element.getAttribute("data-checked")
					return dataChecked === "" || dataChecked === "true"
				},
				renderHTML: attributes => ({
					"data-checked": attributes.checked
				})
			}
		}
	},

	renderHTML({ node, HTMLAttributes }) {
		return [
			"li",
			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
				"data-type": this.name
			}),
			[
				"div",
				{ class: "taskItem-checkbox-container" },
				[
					"label",
					[
						"input",
						{
							type: "checkbox",
							checked: node.attrs.checked ? "checked" : null,
							class: "taskItem-checkbox"
						}
					]
				]
			],
			["div", { class: "taskItem-content" }, 0]
		]
	},

	addNodeView() {
		return ReactNodeViewRenderer(TaskItemView, {
			as: "span"
		})
	}
})