import { jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { cn } from '../../../utils/cn.js';
import { useGanttContext, useGanttInteraction } from './GanttChart.js';
import { GanttTaskContextMenu } from './GanttTaskContextMenu.js';

function getCellValue(task, group, column) {
    if (column.cell) {
        return column.cell(task, group);
    }
    const raw = typeof column.accessor === "function"
        ? column.accessor(task)
        : task[column.accessor];
    return raw != null ? String(raw) : "";
}
const GanttTableTaskRow = React__default.memo(({ task, group, }) => {
    const { theme, columns, rowHeight, onTaskClick } = useGanttContext();
    const { focusedTaskId } = useGanttInteraction();
    return (jsx(GanttTaskContextMenu, { task: task, children: jsx("div", { className: cn(theme.tableTaskRowStyle, "group", onTaskClick && "cursor-pointer", focusedTaskId === task.id && "bg-[var(--color-primary)]/5"), style: { height: rowHeight }, onClick: onTaskClick ? (e) => onTaskClick(task, e) : undefined, onKeyDown: onTaskClick ? (e) => {
                if (e.key === "Enter" || e.key === " ") {
                    e.preventDefault();
                    onTaskClick(task, e);
                }
            } : undefined, role: onTaskClick ? "button" : "row", tabIndex: onTaskClick ? 0 : undefined, "aria-label": task.title, children: columns.map((col) => {
                var _a;
                return (jsx("div", { className: cn(theme.tableCellStyle, "flex items-center", col.align === "center" && "justify-center", col.align === "right" && "justify-end"), style: { width: (_a = col.width) !== null && _a !== void 0 ? _a : 120 }, children: getCellValue(task, group, col) }, col.id));
            }) }) }));
});

export { GanttTableTaskRow };
