import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { useCallback } from "react";
import { Dropdown } from "../../../Dropdown/Dropdown.js";
import { UiIconButton } from "../../UiIconButton/UiIconButton.js";
import { e } from "../asyncTableBem.js";
import { UiAsyncTableCheckbox } from "./UiAsyncTableCheckbox.js";
import { UiAsyncTableIconRenderer } from "./UiAsyncTableIconRenderer.js";
import { getCellId, getColumnWidth, getItemKey, getRowId, getRowLabelId } from "./utils.js";
import { WithConditionalAnchor } from "./WithConditionalAnchor.js";
export function UiAsyncTableRow({ item, itemIndex, columns, onSelect, onClick, isSelected, hasCheckbox, isLarge, isFocused, focusedColumnIndex, focusedElementRef, accessibilityConfig, }) {
    const { renderCellContent } = useRenderCellContent({ isLarge: isLarge ?? false });
    const isRowFocused = isFocused && focusedColumnIndex === undefined;
    const handleRowClick = useCallback((e) => {
        // Check if the click originated from a menu button
        // We can't stop event propagation on dropdown button as we would lose
        // dropdown closeOnOutsideClick functionality, causing menu dropdowns to overlap
        const target = e.target;
        if (target.closest('[data-id="menu-button"]')) {
            return;
        }
        if (item) {
            onClick?.(item);
        }
    }, [onClick, item]);
    return (_jsxs("div", { onClick: handleRowClick, className: e("row", {
            large: isLarge ?? false,
            focused: isRowFocused ?? false,
            active: !!onClick,
        }), ref: isRowFocused ? focusedElementRef : undefined, role: "row", id: item ? getRowId(getItemKey(item)) : undefined, "aria-rowindex": itemIndex + 1, "aria-labelledby": getRowLabelId(itemIndex), children: [hasCheckbox && item ? (_jsx(UiAsyncTableCheckbox, { checked: isSelected, onChange: () => onSelect?.(item), ariaLabel: accessibilityConfig?.getCheckboxItemAriaLabel?.(item), isCellFocused: isFocused ? focusedColumnIndex === 0 : undefined, cellRef: isFocused && focusedColumnIndex === 0 ? focusedElementRef : undefined, cellId: getCellId(getItemKey(item), 0) })) : null, columns.map((column, index) => {
                const { bold, renderMenu, width: widthProp } = column;
                const width = getColumnWidth(!!renderMenu, isLarge ?? false, widthProp);
                const totalColumnIndex = index + (hasCheckbox ? 1 : 0);
                const isCellFocused = isFocused && focusedColumnIndex === totalColumnIndex;
                const labelId = index === 0 ? getRowLabelId(itemIndex) : undefined;
                return (_jsx("div", { style: { width }, id: item ? getCellId(getItemKey(item), totalColumnIndex) : undefined, className: e("cell", {
                        bold: bold ?? false,
                        align: column.align ?? false,
                        focused: isCellFocused ?? false,
                    }), role: "gridcell", children: item
                        ? renderCellContent(column, labelId, item, focusedElementRef ?? (() => { }), isCellFocused ?? false)
                        : null }, index));
            })] }));
}
const useRenderCellContent = ({ isLarge, }) => {
    const renderRoleIconWithWrapper = useCallback((renderRoleIcon, item) => {
        return (_jsx(UiAsyncTableIconRenderer, { renderIcon: renderRoleIcon, className: e("role-icon"), item: item }));
    }, []);
    const renderBadgeWithWrapper = useCallback((renderBadge, item) => {
        return _jsx(UiAsyncTableIconRenderer, { renderIcon: renderBadge, className: e("badge"), item: item });
    }, []);
    const renderPrefixIconWithWrapper = useCallback((renderPrefixIcon, item) => {
        return (_jsx(UiAsyncTableIconRenderer, { renderIcon: renderPrefixIcon, className: e("prefix-icon"), item: item }));
    }, []);
    const renderSuffixIconWithWrapper = useCallback((renderSuffixIcon, item) => {
        return (_jsx(UiAsyncTableIconRenderer, { renderIcon: renderSuffixIcon, className: e("suffix-icon"), item: item }));
    }, []);
    const renderMenuIcon = useCallback((renderMenu, accessibilityConfig, item, focusedElementRef, isCellFocused) => {
        const label = accessibilityConfig?.ariaLabel;
        return (_jsx(Dropdown, { renderButton: ({ toggleDropdown, isOpen }) => {
                const isDisabled = !renderMenu(item, () => toggleDropdown(false));
                return (_jsx(UiIconButton, { size: isLarge ? "xxlarge" : "xlarge", icon: "ellipsis", label: label, variant: "table", onClick: toggleDropdown, dataId: "menu-button", dataTestId: "more", isActive: isOpen, isDisabled: isDisabled, tabIndex: -1, accessibilityConfig: {
                        ariaHaspopup: true,
                        ariaExpanded: isOpen,
                        ariaLabel: label,
                    }, ref: isCellFocused ? focusedElementRef : undefined }));
            }, alignPoints: [{ align: "br tr" }, { align: "tr br" }], renderBody: ({ closeDropdown }) => renderMenu(item, closeDropdown) }));
    }, [isLarge]);
    const renderTextContent = useCallback((item, key, labelId, getTextContent, getMultiLineTextContent, renderSuffixIcon) => {
        if (getMultiLineTextContent) {
            return getMultiLineTextContent(item).map((line, index) => {
                const isFirst = index === 0;
                return (_jsxs("span", { className: e("text-line", { first: isFirst }), children: [
                        _jsx("span", { id: isFirst ? labelId : undefined, className: e("text-line-content"), children: line }), renderSuffixIcon && isFirst
                            ? renderSuffixIconWithWrapper(renderSuffixIcon, item)
                            : null] }, index));
            });
        }
        if (getTextContent) {
            return _jsx("span", { id: labelId, children: getTextContent(item) });
        }
        return key === undefined ? "" : String(item[key]);
    }, [renderSuffixIconWithWrapper]);
    const renderTextContentWithWrapper = useCallback((item, key, labelId, getTextContent, getMultiLineTextContent, getTextTitle, getTextHref, renderSuffixIcon, textColor, focusedElementRef, isCellFocused) => {
        const textContent = renderTextContent(item, key, labelId, getTextContent, getMultiLineTextContent, renderSuffixIcon);
        const title = getTextTitle
            ? getTextTitle(item)
            : typeof textContent === "string"
                ? textContent
                : "";
        const isActive = !!getTextHref;
        return (_jsx(WithConditionalAnchor, { href: getTextHref?.(item), children: _jsx("div", { title: title, ref: isActive && isCellFocused ? focusedElementRef : undefined, className: e("text", {
                    "multi-line": !!getMultiLineTextContent,
                    color: !getMultiLineTextContent && textColor ? textColor : false,
                }), children: textContent }) }));
    }, [renderTextContent]);
    const renderCellContent = useCallback(({ renderButton, renderMenu, renderRoleIcon, renderPrefixIcon, renderSuffixIcon, renderBadge, getTextContent, getMultiLineTextContent, getTextTitle, getTextHref, getAccessibilityConfig, textColor, key, }, labelId, item, focusedElementRef, isCellFocused) => {
        const accessibilityConfig = getAccessibilityConfig?.(item);
        if (renderButton) {
            return renderButton(item);
        }
        if (renderMenu) {
            return renderMenuIcon(renderMenu, accessibilityConfig ?? {}, item, focusedElementRef, isCellFocused);
        }
        return (_jsxs(_Fragment, { children: [renderRoleIcon ? renderRoleIconWithWrapper(renderRoleIcon, item) : null, renderPrefixIcon ? renderPrefixIconWithWrapper(renderPrefixIcon, item) : null, renderTextContentWithWrapper(item, key, labelId, getTextContent, getMultiLineTextContent, getTextTitle, getTextHref, renderSuffixIcon, textColor, focusedElementRef, isCellFocused), renderBadge ? renderBadgeWithWrapper(renderBadge, item) : null, getMultiLineTextContent
                    ? null
                    : renderSuffixIcon && renderSuffixIconWithWrapper(renderSuffixIcon, item)] }));
    }, [
        renderMenuIcon,
        renderRoleIconWithWrapper,
        renderPrefixIconWithWrapper,
        renderSuffixIconWithWrapper,
        renderBadgeWithWrapper,
        renderTextContentWithWrapper,
    ]);
    return {
        renderCellContent,
    };
};
