import React from 'react';
import Toggle from '../../../Transition/Toggle';
import { timingMap } from '../../../Transition/constants';
import defaultTo from 'lodash/defaultTo';
import { classes, st } from '../DataTable.st.css.js';
import classNames from 'classnames';
import { ColumnResizeConsumer } from '../../ColumnResize';
const DataTableRow = props => {
    const getCellClasses = ({ column, colNum }) => {
        const { rowData, stickyColumns, rowDetails, showDetails } = props;
        return classNames({
            [classes.important]: column.important,
            [classes.alignStart]: column.align === 'start',
            [classes.alignCenter]: column.align === 'center',
            [classes.alignEnd]: column.align === 'end',
            [classes.sticky]: colNum < stickyColumns,
            [classes.lastSticky]: colNum === stickyColumns - 1,
            [classes.stickyActionCell]: column.stickyActionCell,
            [classes.hasRowDetails]: rowDetails,
            [classes.rowDetailsExtended]: showDetails && rowDetails(rowData),
        });
    };
    const renderCell = ({ column, colNum, currentWidth, getStickyColumnStyle, }) => {
        const { rowData, rowNum, maskingClassNames, isDragOverlay, virtualized, stickyColumns, columns, hideHeader, hideHeaderAccessible, isApplyColumnWidthStyle, } = props;
        const width = isDragOverlay ||
            ((virtualized || rowNum === 0) && (hideHeader || hideHeaderAccessible))
            ? currentWidth
            : undefined;
        const widthStyle = isApplyColumnWidthStyle
            ? currentWidth
                ? { width: currentWidth }
                : {}
            : {};
        const style = typeof column.style === 'function'
            ? column.style(column, rowData, rowNum)
            : column.style;
        const stickyColumnStyle = colNum < stickyColumns
            ? getStickyColumnStyle(columns, column)
            : undefined;
        const cellClasses = getCellClasses({
            column,
            colNum,
        });
        return (React.createElement("td", { key: column.key ?? colNum, "data-mask": !!maskingClassNames, "data-hook": column.dataHook, style: {
                ...style,
                ...stickyColumnStyle,
                ...widthStyle,
            }, width: width, className: st(cellClasses, {}, maskingClassNames), onClick: column.onCellClick
                ? event => column.onCellClick(column, rowData, rowNum, event)
                : undefined }, column.render && column.render(rowData, rowNum)));
    };
    const onClickRow = () => {
        const { toggleRowDetails, rowData, rowNum, onRowClick, rowDetails, isRowDisabled, } = props;
        onRowClick && !isRowDisabled(rowData) && onRowClick(rowData, rowNum);
        rowDetails && rowDetails(rowData, rowNum) && toggleRowDetails(rowData);
    };
    const onKeyDownRow = event => {
        // Trigger row click on Enter or Space key
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            onClickRow();
        }
    };
    const renderRow = (getEffectiveColumnWidth, getStickyColumnStyle) => {
        const { rowData, rowNum, style, className, isDragOverlay, onRowClick, onMouseEnterRow, onMouseLeaveRow, rowDataHook, dynamicRowClass, isRowHighlight, isRowActive, rowDetails, rowClass, columns, selectedRowsIds, isRowSelected, isRowDisabled, dragAndDrop, isDragAndDropDisabled, showDetails, virtualized, TrElementType = 'tr', rowProps = {}, } = props;
        const rowClasses = [rowClass, className];
        const key = defaultTo(rowData.id, rowNum);
        const optionalRowProps = { ...rowProps };
        const isRowHighlighted = isRowHighlight && isRowHighlight(rowData, rowNum);
        const isActive = isRowActive && isRowActive(rowData, rowNum);
        const handlers = [
            { rowEventHandler: onClickRow, eventHandler: 'onClick' },
            { rowEventHandler: onMouseEnterRow, eventHandler: 'onMouseEnter' },
            { rowEventHandler: onMouseLeaveRow, eventHandler: 'onMouseLeave' },
        ];
        handlers.forEach(({ rowEventHandler, eventHandler }) => {
            if (rowEventHandler) {
                optionalRowProps[eventHandler] = event => {
                    if (event.isDefaultPrevented()) {
                        return;
                    }
                    rowEventHandler(rowData, rowNum);
                };
            }
        });
        if (onRowClick && !isRowDisabled(rowData)) {
            rowClasses.push(classes.clickableDataRow);
            optionalRowProps.tabIndex = 0;
            optionalRowProps.onKeyDown = onKeyDownRow;
        }
        if (rowDetails) {
            rowClasses.push(classes.animatedDataRow);
        }
        if (rowDataHook) {
            if (typeof rowDataHook === 'string') {
                optionalRowProps['data-hook'] = rowDataHook;
            }
            else {
                optionalRowProps['data-hook'] = rowDataHook(rowData, rowNum);
            }
        }
        if (typeof TrElementType !== 'string') {
            optionalRowProps.rowData = rowData;
        }
        if (dynamicRowClass) {
            rowClasses.push(dynamicRowClass(rowData, rowNum));
        }
        if (isRowHighlighted) {
            rowClasses.push(classes.highlight);
        }
        if (isActive) {
            rowClasses.push(classes.activeRow);
        }
        if (isRowSelected
            ? isRowSelected(rowData, rowNum)
            : selectedRowsIds && selectedRowsIds.includes(key)) {
            rowClasses.push(classes.selected);
        }
        optionalRowProps.className = classNames(rowClasses);
        let tr = (React.createElement(TrElementType, { "data-table-row": "dataTableRow", "data-key": key, "data-index": `index-${rowNum}`, style: style, key: key, "data-highlighted": isRowHighlighted ? true : null, ...optionalRowProps, "data-animated": !!rowDetails ? true : null, "data-clickable": onRowClick && !isRowDisabled(rowData) ? true : null }, columns.map((column, colNum) => renderCell({
            column,
            colNum,
            currentWidth: getEffectiveColumnWidth(column),
            getStickyColumnStyle,
        }))));
        if (dragAndDrop) {
            const { DraggableTableRow } = dragAndDrop;
            tr = (React.createElement(DraggableTableRow, { id: rowData.id, key: tr.key, index: rowNum, isDragOverlay: isDragOverlay, isDragAndDropDisabled: isDragAndDropDisabled, forwardedRef: rowProps.ref }, tr));
        }
        const rowsToRender = [tr];
        if (rowDetails) {
            rowsToRender.push(React.createElement("tr", { key: `${key}_details`, className: classes.rowDetails },
                React.createElement("td", { "data-hook": `${rowNum}_details`, className: classNames(classes.details, showDetails ? classes.active : ''), colSpan: columns.length },
                    React.createElement(Toggle, { timeout: timingMap['medium01'], show: showDetails, unmountOnExit: true }, rowDetails(rowData, rowNum)))));
        }
        return virtualized ? rowsToRender[0] : rowsToRender;
    };
    return (React.createElement(React.Fragment, null, React.createElement(ColumnResizeConsumer, null, ({ getEffectiveColumnWidth, getStickyColumnStyle }) => renderRow(getEffectiveColumnWidth, getStickyColumnStyle))));
};
DataTableRow.displayName = 'Table.DataTableRow';
export default DataTableRow;
//# sourceMappingURL=DataTableRow.js.map