import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { AnimatePresence, motion } from 'motion/react';
import { TableCell } from './TableCell.js';
import { Button } from '../../core/Button/Button.js';
import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
import { Radio } from '../../forms/Radio/Radio.js';
import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
import { UTILITY_COLUMN_WIDTH, UTILITY_COLUMN_ID } from './Table.utils.js';
import { tableExpandAnimations, tableExpandContentAnimations } from './Table.animations.js';

function TableRowComponent({ row, rowId, columns, expandedRowRender, isExpanded = false, onExpandChange, selectable, selectionType, isSelected = false, onSelectionChange, freezeFirstColumn, freezeLastColumn, theme, }) {
    const rowClasses = [
        (theme === null || theme === void 0 ? void 0 : theme.rowStyle) || "",
        isSelected ? (theme === null || theme === void 0 ? void 0 : theme.selectedRowStyle) || "" : "",
    ]
        .filter(Boolean)
        .join(" ");
    const handleExpandClick = (e) => {
        e.stopPropagation();
        onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(!isExpanded);
    };
    const colSpan = columns.length + (selectable || !!expandedRowRender ? 1 : 0);
    return (jsxs(Fragment, { children: [jsxs("tr", { className: rowClasses, "data-selected": isSelected, role: "row", "aria-selected": selectable ? isSelected : undefined, "aria-expanded": Boolean(expandedRowRender) ? isExpanded : undefined, children: [(selectable || expandedRowRender) && (jsx(TableCell, { column: {
                            id: UTILITY_COLUMN_ID,
                            header: "",
                            accessor: () => "",
                            width: UTILITY_COLUMN_WIDTH,
                        }, row: row, rowId: rowId, isSelected: isSelected, theme: theme, children: jsxs("div", { className: "flex items-center gap-2", children: [selectable &&
                                    (selectionType === "checkbox" ? (jsx(Checkbox, { id: `table-checkbox-${rowId}`, name: `table-selection-${rowId}`, value: String(rowId), checked: isSelected, onChange: (checked) => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked), onClick: (e) => e.stopPropagation(), "aria-label": "Select row" })) : (jsx("div", { onClick: (e) => e.stopPropagation(), children: jsx(Radio, { id: `table-radio-${rowId}`, name: "table-selection", value: String(rowId), checked: isSelected, onChange: (checked) => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked), "aria-label": "Select row" }) }))), expandedRowRender && (jsx(Button, { color: "neutral", variant: "outline", size: "sm", iconOnly: true, onClick: handleExpandClick, "aria-label": isExpanded ? "Collapse row" : "Expand row", children: isExpanded ? (jsx(MinusIcon, { className: "size-4", strokeWidth: 2 })) : (jsx(PlusIcon, { className: "size-4", strokeWidth: 2 })) }))] }) })), columns.map((column, index) => (jsx(TableCell, { column: column, row: row, rowId: rowId, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, isSelected: isSelected, theme: theme }, column.id)))] }), jsx(AnimatePresence, { initial: false, children: isExpanded && expandedRowRender && (jsx(motion.tr, { initial: "collapsed", animate: "expanded", exit: "collapsed", children: jsx("td", { colSpan: colSpan, className: "p-0 border-b border-[var(--color-border)] dark:border-[var(--color-neutral-700)]", children: jsx(motion.div, { variants: tableExpandAnimations, style: { overflow: "hidden" }, children: jsx(motion.div, { variants: tableExpandContentAnimations, children: expandedRowRender(row) }) }) }) }, `${rowId}-expanded`)) })] }));
}
TableRowComponent.displayName = "TableRow";
const TableRow = React__default.memo(TableRowComponent);

export { TableRow };
