import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import { cn, useWindowSize } from "@utils";
import { ADPIcon } from "../adpIcon";
import { Dropdown } from "../dropdown";
import { Tooltip } from "../tooltip";
import { ctaGroupVariants, ctaVariants, ctaDropdownItemVariants } from "./ctaGroupVariants";
import { mobileBreakPoint } from "@constants";
export const CTAGroup = React.forwardRef(({ ctaList, shrink, className, dropdownPortalTarget, threshold, showLabels = false }, ref) => {
    const [ctaShrinked, setCtaShrinked] = React.useState(shrink !== null && shrink !== void 0 ? shrink : false);
    const { width } = useWindowSize();
    React.useEffect(() => {
        if (shrink !== undefined) {
            setCtaShrinked(shrink);
        }
        else {
            if (width <= mobileBreakPoint && ctaList.length > 2) {
                setCtaShrinked(true);
            }
            else {
                setCtaShrinked(false);
            }
        }
    }, [width, shrink, ctaList]);
    const numberOfCTAs = ctaList.length;
    const showExtraDropdown = (ctaShrinked || numberOfCTAs < 3)
        ? false
        : threshold
            ? numberOfCTAs > threshold
            : false;
    const dropDownJSX = (_jsx(Dropdown, { portalTarget: dropdownPortalTarget, ctaClassName: ctaVariants(), ctaContent: _jsx(ADPIcon, { size: "sm", icon: "v-menu-filled" }), children: (showExtraDropdown
            ? [...ctaList].slice(threshold, numberOfCTAs)
            : ctaList).map(({ icon, callback, label, disabled }, index) => (_jsxs(Dropdown.Item, { disabled: disabled, onClickHandler: callback, className: ctaDropdownItemVariants(), children: [icon, label] }, index))) }));
    if (showExtraDropdown) {
        return (_jsxs("div", { ref: ref, "data-testid": "crossedThreshold", className: cn(ctaGroupVariants(), className), children: [!ctaShrinked &&
                    [...ctaList]
                        .slice(0, threshold)
                        .map(({ icon, callback, disabled, label }, index) => showLabels ? (_jsxs("button", { className: cn(ctaVariants()), onClick: callback, disabled: disabled, children: [icon, label] }, index)) : (_jsx(Tooltip, { clickable: false, placement: "bottom", onTriggerClick: () => {
                            if (!disabled) {
                                callback();
                            }
                        }, trigger: icon, triggerAriaLabel: label, triggerElementClassName: cn(ctaVariants()), disabled: disabled, children: label }, index))), dropDownJSX] }));
    }
    return ctaShrinked ? (dropDownJSX) : (_jsx("div", { ref: ref, "data-testid": "ctaGroup", className: cn(ctaGroupVariants(), className), children: ctaList.map(({ icon, callback, disabled, label }, index) => showLabels ? (_jsxs("button", { className: cn(ctaVariants()), onClick: callback, disabled: disabled, children: [icon, label] }, index)) : (_jsx(Tooltip, { clickable: false, placement: "bottom", onTriggerClick: () => {
                if (!disabled) {
                    callback();
                }
            }, trigger: icon, triggerAriaLabel: label, triggerElementClassName: cn(ctaVariants()), disabled: disabled, children: label }, index))) }));
});
CTAGroup.displayName = "CTAGroup";
//# sourceMappingURL=ctaGroup.js.map