"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderTitleRow = renderTitleRow;
exports.UIFlexibleTableRow = UIFlexibleTableRow;
const react_1 = __importDefault(require("react"));
const __1 = require("..");
const types_1 = require("./types");
const utils_1 = require("./utils");
/**
 * Render row title.
 *
 * @param {UIFlexibleTableProps<T>} props
 * @param {UIFlexibleTableRowType<T>} row
 * @param {number | undefined} rowIndex
 * @param {React.ReactElement} rowActions
 * @returns {React.ReactNode}
 */
function renderRowTitle(props, row, rowIndex, rowActions) {
    return (react_1.default.createElement("div", { className: "flexible-table-content-table-row-header" },
        react_1.default.createElement("div", { className: "flexible-table-content-table-row-header-text-content", title: row.tooltip }, row.title || react_1.default.createElement("span", null)),
        props.layout === types_1.UIFlexibleTableLayout.Wrapping &&
            getActionsContainer(false, rowIndex, rowActions, 'flexible-table-content-table-row-header-actions')));
}
/**
 *
 * @param {boolean} useFocusZone
 * @param {number | undefined} rowIndex
 * @param {React.ReactElement} rowActions
 * @param {string} className
 * @returns {JSX.Element}
 */
function getActionsContainer(useFocusZone, rowIndex, rowActions, className) {
    return useFocusZone ? (react_1.default.createElement(__1.UIFocusZone, { as: "div", key: `cell-actions-${rowIndex ?? 'unknown'}`, className: className, direction: __1.UIFocusZoneDirection.horizontal, isCircularNavigation: true, shouldEnterInnerZone: (ev) => ev.key === 'Enter' }, rowActions)) : (react_1.default.createElement("div", { className: className }, rowActions));
}
/**
 * On render title row.
 *
 * @param {UIFlexibleTableProps<T>} props
 * @param {number} paddingRight
 * @returns {React.ReactNode}
 */
function renderTitleRow(props, paddingRight) {
    const rowCells = [];
    if (props.showIndexColumn) {
        if (props.onRenderTitleColumnCell) {
            const { content, cellClassNames, tooltip } = props.onRenderTitleColumnCell({
                isIndexColumn: true
            });
            const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-index', [cellClassNames]);
            rowCells.push(react_1.default.createElement("div", { key: "title-cell-index", className: className, title: tooltip }, content));
        }
        else {
            rowCells.push(react_1.default.createElement("div", { key: "title-cell-index", className: "flexible-table-content-table-title-row-item-index" },
                react_1.default.createElement("span", { className: "flexible-table-content-table-title-row-item-index-value" }, "#")));
        }
    }
    const rowCellsData = [];
    const tableId = props.id;
    for (let i = 0; i < props.columns.length; i++) {
        const column = props.columns[i];
        if (column.hidden) {
            continue;
        }
        const key = column.key;
        if (props.onRenderTitleColumnCell) {
            const { content, isSpan, cellClassNames, tooltip } = props.onRenderTitleColumnCell({
                colIndex: i,
                colKey: key
            });
            const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-data-cells-value', [
                cellClassNames,
                column.className
            ]);
            if (isSpan) {
                rowCellsData.push(react_1.default.createElement("div", { key: `title-cell-unknown`, className: className, title: tooltip || column.tooltip, id: `${tableId}-header-column-${key}` }, content));
                break;
            }
            else {
                rowCellsData.push(react_1.default.createElement("div", { key: `cell-${key}-${i}`, className: className, title: tooltip || column.tooltip, id: `${tableId}-header-column-${key}` }, content));
            }
        }
        else {
            const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-data-cells-value', [
                column.className
            ]);
            rowCellsData.push(react_1.default.createElement("div", { key: `title-cell-${key}-${i}`, className: className, title: column.tooltip, id: `${tableId}-header-column-${key}` }, column.title));
        }
    }
    // Add data cells titles
    rowCells.push(react_1.default.createElement("div", { key: `flexible-table-content-table-title-row-item-data-cells}`, className: `flexible-table-content-table-title-row-item-data-cells in-row` }, rowCellsData));
    // Add actions title
    if (props.onRenderTitleColumnCell) {
        const { content, cellClassNames, tooltip } = props.onRenderTitleColumnCell({
            isActionsColumn: true
        });
        const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-actions', [cellClassNames]);
        rowCells.push(react_1.default.createElement("div", { key: "title-row", className: className, title: tooltip }, content));
    }
    else {
        rowCells.push(react_1.default.createElement("div", { key: `title-cell-actions`, className: "flexible-table-content-table-title-row-item-actions" }));
    }
    return (react_1.default.createElement("div", { className: "flexible-table-content-table-title-row", key: "title-row", style: { paddingRight }, tabIndex: -1 },
        react_1.default.createElement("div", { className: "flexible-table-content-table-title-row-wrapper" },
            react_1.default.createElement("div", { className: "flexible-table-content-table-title-row-wrapper-cells" }, rowCells))));
}
/**
 * Method checks if passed row is disabled for drag.
 *
 * @param value Row item value.
 * @returns {boolean} Is row disabled for drag.
 */
function isRowDisabled(value) {
    let disabled = false;
    if (value && typeof value === 'object' && 'disabled' in value) {
        disabled = !!value.disabled;
    }
    return disabled;
}
/**
 * Method returns CSS styles for row item element.
 *
 * @param isDragDisabled Is row disabled for drag.
 * @param isDragged True if row is currently dragging.
 * @param isTouchDragDisabled Is drag disabled by touch events.
 * @returns {string} CSS styles for row item element.
 */
function getRowStyles(isDragDisabled, isDragged, isTouchDragDisabled) {
    const style = {
        pointerEvents: 'all',
        cursor: isDragged ? 'grabbing' : 'inherit',
        touchAction: 'none'
    };
    if (isDragDisabled) {
        style.cursor = 'default';
    }
    if (isDragDisabled || isTouchDragDisabled) {
        style.touchAction = 'auto';
    }
    return style;
}
/**
 * Method returns class name for row index parity.
 *
 * @param rowIndex Row index.
 * @returns {string} Class name string.
 */
function getParityClassName(rowIndex) {
    let className = '';
    if (rowIndex !== undefined) {
        // Index is zero based - odd/even opposite
        className = rowIndex % 2 === 0 ? 'odd' : 'even';
    }
    return className;
}
/**
 * UIFlexibleTableRow component.
 *
 * @exports
 * @param {UIFlexibleTableRowProps} props
 * @returns {JSX.Element}
 */
function UIFlexibleTableRow(props) {
    const { dragAndDropParams: params, rowData, rowActions, rowRef, tableProps, className: dynamicClassName } = props;
    const row = params.value;
    const rowIndex = params.index;
    const rowCells = [];
    const { isDragged, isSelected, isOutOfBounds, value } = params;
    const isRow = row && rowIndex !== undefined;
    const isDragDisabled = isRowDisabled(value);
    if (isRow) {
        rowCells.push(rowData);
        if (tableProps.layout === types_1.UIFlexibleTableLayout.InlineFlex) {
            // Add row actions
            rowCells.push(getActionsContainer(true, rowIndex, rowActions, 'flexible-table-content-table-row-item-actions'));
        }
    }
    const rowClassName = (0, utils_1.composeClassNames)('flexible-table-content-table-row', [
        tableProps.noRowBackground ? 'no-background' : '',
        isDragged ? 'dragged' : '',
        isSelected ? 'selected' : '',
        isOutOfBounds ? 'out-of-bounds' : '',
        row.className ?? '',
        tableProps.lockVertically ? 'locked-axis' : 'unlocked-axis',
        getParityClassName(rowIndex),
        tableProps.reverseBackground && !tableProps.noRowBackground ? 'reverse-background' : '',
        dynamicClassName
    ]);
    const rowWrapperClassNames = [
        'flexible-table-content-table-row-wrapper',
        tableProps.layout === types_1.UIFlexibleTableLayout.InlineFlex ? 'inline-layout' : 'wrapping-layout'
    ].join(' ');
    const showRowTitle = isRow && (tableProps.showRowTitles || tableProps.layout === types_1.UIFlexibleTableLayout.Wrapping);
    const style = {
        ...params.props.style,
        ...getRowStyles(isDragDisabled, isDragged, !!tableProps.isTouchDragDisabled)
    };
    if (tableProps.isContentLoading) {
        style.pointerEvents = 'none';
        style.cursor = 'none';
    }
    let onTouchStart;
    let onTouchEnd;
    // Disable drag using touch events
    if (!isDragDisabled && tableProps.isTouchDragDisabled) {
        onTouchStart = (event) => {
            event.nativeEvent.stopImmediatePropagation();
        };
        onTouchEnd = (event) => {
            event.nativeEvent.stopImmediatePropagation();
        };
    }
    return (react_1.default.createElement("li", { ...params.props, className: rowClassName, "data-movable-handle": true, key: `row-${rowIndex}`, id: `row-${rowIndex}`, style: style, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd },
        react_1.default.createElement("div", { className: rowWrapperClassNames, ref: rowRef },
            showRowTitle && renderRowTitle(tableProps, row, rowIndex, rowActions),
            react_1.default.createElement("div", { className: "flexible-table-content-table-row-wrapper-cells" }, rowCells))));
}
//# sourceMappingURL=UIFlexibleTableRow.js.map