// (C) 2025-2026 GoodData Corporation
import { useLayoutEffect, useState } from "react";
import { useTagsElements } from "./useTagsElements.js";
const PADDING = 5;
const MIN_WIDTH = 10;
export function useResponsiveTags(tags, mode, deps) {
    const { rootRef, allContainerRef, tagsContainerRef, tagsContainerWidth, hiddenTagsContainerRef, addButtonRef, tooltipTagsContainerRef, tooltipTagsContainer, setTooltipContainer, } = useTagsElements();
    const [showedTags, setShowedTags] = useState(tags);
    const [hiddenTags, setHiddenTags] = useState([]);
    const [availableWidth, setAvailableWidth] = useState("none");
    const [lastAvailableWidth, setLastAvailableWidth] = useState("none");
    const [tooltipWidth, setTooltipWidth] = useState("none");
    useLayoutEffect(() => {
        const container = allContainerRef.current;
        const hiddenContainer = hiddenTagsContainerRef.current;
        const addButton = addButtonRef.current;
        if (!container) {
            return;
        }
        switch (mode) {
            case "single-line": {
                const { showedTags, hiddenTags, availableWidth, lastAvailableWidth } = recalculateSingleLineTags(tags, container, tagsContainerWidth, hiddenContainer ?? undefined, addButton ?? undefined);
                setShowedTags(showedTags);
                setHiddenTags(hiddenTags);
                setAvailableWidth(availableWidth);
                setLastAvailableWidth(lastAvailableWidth);
                break;
            }
            case "multi-line": {
                const { showedTags, hiddenTags, availableWidth, lastAvailableWidth } = recalculateMultiLineTags(tags, tagsContainerWidth, addButton ?? undefined);
                setShowedTags(showedTags);
                setHiddenTags(hiddenTags);
                setAvailableWidth(availableWidth);
                setLastAvailableWidth(lastAvailableWidth);
                break;
            }
        }
    }, [
        tagsContainerWidth,
        tags,
        allContainerRef,
        hiddenTagsContainerRef,
        addButtonRef,
        mode,
        // eslint-disable-next-line react-hooks/exhaustive-deps
        ...(deps ?? []),
    ]);
    useLayoutEffect(() => {
        const width = tooltipTagsContainer?.offsetWidth ?? 0;
        setTooltipWidth(width > MIN_WIDTH ? width : "none");
    }, [tooltipTagsContainer?.offsetWidth]);
    return {
        rootRef,
        showedTags,
        hiddenTags,
        allContainerRef,
        tagsContainerRef,
        hiddenTagsContainerRef,
        tooltipTagsContainerRef,
        addButtonRef,
        availableWidth,
        lastAvailableWidth,
        tooltipWidth,
        setTooltipContainer,
    };
}
function recalculateSingleLineTags(tags, container, tagsContainerWidth, hiddenContainer, addButton) {
    let currentWidth = 0;
    let i = 0;
    // add offset width from elements
    currentWidth += hiddenContainer?.offsetWidth ?? 0;
    currentWidth += addButton?.offsetWidth ?? 0;
    currentWidth += 4; // padding of container
    const availableWidth = tagsContainerWidth - currentWidth;
    const count = container.children.length;
    for (; i < count; i++) {
        const child = container.children[i];
        const tempWidth = currentWidth + child.offsetWidth;
        if (tempWidth > tagsContainerWidth) {
            break;
        }
        // add offset width
        currentWidth += child.offsetWidth;
    }
    let showedTags = tags.slice(0, i);
    let hiddenTags = tags.slice(i);
    if (count > 0 && showedTags.length === 0) {
        showedTags = tags.slice(0, 1);
        hiddenTags = tags.slice(1);
    }
    return {
        showedTags,
        hiddenTags,
        availableWidth,
        lastAvailableWidth: availableWidth,
    };
}
function recalculateMultiLineTags(tags, tagsContainerWidth, addButton) {
    const availableWidth = tagsContainerWidth;
    const lastAvailableWidth = availableWidth - (addButton?.offsetWidth ? addButton.offsetWidth + PADDING : 0);
    return {
        showedTags: tags,
        hiddenTags: [],
        availableWidth,
        lastAvailableWidth,
    };
}
