import { useCallback, useState } from "react"
import {
    INSERT_ORDERED_LIST_COMMAND,
    INSERT_UNORDERED_LIST_COMMAND,
    REMOVE_LIST_COMMAND,
} from "@lexical/list"
import { $isListNode, ListNode } from "@lexical/list"
import { $getNearestNodeOfType } from "@lexical/utils"
import {
    $getSelection,
    $isRangeSelection,
    BaseSelection,
} from "lexical"
import { ListIcon, ListOrderedIcon } from "lucide-react"

import { useToolbarContext } from "@/components/editor/context/toolbar-context"
import { useUpdateToolbarHandler } from "@/components/editor/editor-hooks/use-update-toolbar"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

export function ListToolbarPlugin() {
    const { activeEditor } = useToolbarContext()
    const [listType, setListType] = useState<string | null>(null)

    const $updateToolbar = useCallback((selection: BaseSelection) => {
        if ($isRangeSelection(selection)) {
            const anchorNode = selection.anchor.getNode()
            const element =
                anchorNode.getKey() === "root"
                    ? anchorNode
                    : anchorNode.getTopLevelElementOrThrow()

            const elementKey = element.getKey()
            const elementDOM = activeEditor.getElementByKey(elementKey)

            if (elementDOM !== null) {
                const parentList = $getNearestNodeOfType(anchorNode, ListNode)
                if (parentList) {
                    const type = $isListNode(parentList)
                        ? parentList.getListType()
                        : null
                    setListType(type)
                } else {
                    setListType(null)
                }
            }
        }
    }, [activeEditor])

    useUpdateToolbarHandler($updateToolbar)

    const formatBulletList = () => {
        if (listType !== "bullet") {
            activeEditor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)
        } else {
            activeEditor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)
        }
    }

    const formatNumberedList = () => {
        if (listType !== "number") {
            activeEditor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)
        } else {
            activeEditor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)
        }
    }

    return (
        <ToggleGroup
            type="single"
            value={listType || ""}
            variant="outline"
            size="sm"
        >
            <ToggleGroupItem
                value="bullet"
                aria-label="Bulleted List"
                onClick={formatBulletList}
            >
                <ListIcon className="size-4" />
            </ToggleGroupItem>
            <ToggleGroupItem
                value="number"
                aria-label="Numbered List"
                onClick={formatNumberedList}
            >
                <ListOrderedIcon className="size-4" />
            </ToggleGroupItem>
        </ToggleGroup>
    )
}