// (C) 2025-2026 GoodData Corporation
import { useCallback, useLayoutEffect, useRef, useState } from "react";
import { programaticFocusManagement } from "../UiFocusManager/utils.js";
const TAG_SELECTOR = ".gd-ui-kit-tags__tag";
function getTagElements(container) {
    if (!container) {
        return [];
    }
    return Array.from(container.querySelectorAll(TAG_SELECTOR));
}
function findTagIndex(container, tagId) {
    return getTagElements(container).findIndex((element) => element.dataset["tagId"] === tagId);
}
export function useTagsInteractions(tagsContainerRef, tooltipTagsContainerRef, showedTags, hiddenTags, onTagAdd, onTagRemove, onTagClick) {
    const [tag, setTag] = useState("");
    const pendingTagFocus = useRef(null);
    const interactionState = useRef({
        moreOpen: false,
        addOpen: false,
        add: null,
        close: null,
        save: null,
        input: null,
    });
    const focusTagByIndex = (tagElements, index) => {
        if (tagElements.length === 0) {
            interactionState.current.add?.focus();
            return false;
        }
        const focusIndex = Math.min(Math.max(index, 0), tagElements.length - 1);
        const tagWrapper = tagElements[focusIndex];
        if (!tagWrapper) {
            return false;
        }
        const innerTag = tagWrapper.querySelector(".gd-ui-kit-tag");
        programaticFocusManagement(innerTag ?? tagWrapper);
        return true;
    };
    const onMoreOpen = useCallback(() => {
        interactionState.current.moreOpen = true;
    }, []);
    const onMoreClose = useCallback(() => {
        interactionState.current.moreOpen = false;
    }, []);
    const onAddOpen = useCallback(() => {
        interactionState.current.addOpen = true;
    }, []);
    const onAddClose = useCallback(() => {
        interactionState.current.addOpen = false;
    }, []);
    const onTagAddHandler = useCallback(() => {
        if (!tag) {
            return;
        }
        onTagAdd?.({ id: tag, label: tag });
        setTag("");
    }, [tag, onTagAdd]);
    const onTagRemoveHandler = useCallback((removedTag) => {
        let area = "root";
        let deletedIndex = findTagIndex(tooltipTagsContainerRef.current, removedTag.id);
        if (deletedIndex === -1) {
            deletedIndex = findTagIndex(tagsContainerRef.current, removedTag.id);
        }
        else {
            area = "dialog";
        }
        if (deletedIndex !== -1) {
            pendingTagFocus.current = { area, deletedIndex };
        }
        onTagRemove?.(removedTag);
    }, [onTagRemove, tagsContainerRef, tooltipTagsContainerRef]);
    const onTagClickHandler = useCallback((clickedTag) => {
        onTagClick?.(clickedTag);
    }, [onTagClick]);
    useLayoutEffect(() => {
        if (!pendingTagFocus.current) {
            return;
        }
        const { area, deletedIndex } = pendingTagFocus.current;
        pendingTagFocus.current = null;
        const primaryContainer = area === "dialog" ? tooltipTagsContainerRef.current : tagsContainerRef.current;
        const primaryTagElements = getTagElements(primaryContainer);
        if (focusTagByIndex(primaryTagElements, deletedIndex)) {
            return;
        }
        const showedTagElements = getTagElements(tagsContainerRef.current);
        focusTagByIndex(showedTagElements, showedTagElements.length - 1);
    }, [showedTags, hiddenTags, tagsContainerRef, tooltipTagsContainerRef]);
    return {
        tag,
        setTag,
        onAddOpen,
        onAddClose,
        onMoreOpen,
        onMoreClose,
        onTagAddHandler,
        onTagRemoveHandler,
        onTagClickHandler,
        interactionState,
    };
}
