import $i18n from '../../../../../../../../locales/i18n.js';
import * as React from 'react';
import classNames from 'classnames';
import { CnIcon } from '@cainiaofe/cn-ui';
import { getActionColumnWidth } from '../../../drag-utils';
const DEFAULT_DATA_COL_WIDTH = 200;
const DEFAULT_OPERATE_COL_WIDTH = 150;
/**
 * 分组表头行：左 sticky（功能列+首列）、中间占位、右操作列（可选）
 */
export const GroupedHeaderRow = function GroupedHeaderRow(props) {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    const { table, groupRow, virtualRowSize, depth, isFirstGroup, widthMap, getGroupInfo, showIndex, rowSelectionProps, operateColumn, } = props;
    const groupInfo = getGroupInfo(groupRow);
    if (!groupInfo) {
        return null;
    }
    const rowsByIdMap = table.getRowModel().rowsById;
    const headerRow = (groupRow === null || groupRow === void 0 ? void 0 : groupRow.id) && (rowsByIdMap === null || rowsByIdMap === void 0 ? void 0 : rowsByIdMap[groupRow.id]) ? rowsByIdMap[groupRow.id] : groupRow;
    const isExpanded = (_b = (_a = headerRow.getIsExpanded) === null || _a === void 0 ? void 0 : _a.call(headerRow)) !== null && _b !== void 0 ? _b : true;
    const handleToggle = (e) => {
        var _a;
        e.preventDefault();
        e.stopPropagation();
        (_a = headerRow.toggleExpanded) === null || _a === void 0 ? void 0 : _a.call(headerRow);
    };
    const ariaLabel = isExpanded
        ? $i18n.get({ id: 'CollapseGroup', dm: '折叠分组' })
        : $i18n.get({ id: 'ExpandGrouping', dm: '展开分组' });
    const headerGroups = table.getHeaderGroups();
    const visibleCells = (_d = (_c = headerGroups[0]) === null || _c === void 0 ? void 0 : _c.headers) !== null && _d !== void 0 ? _d : [];
    const rowSelectionEnabled = (_e = rowSelectionProps === null || rowSelectionProps === void 0 ? void 0 : rowSelectionProps.hasSelect) !== null && _e !== void 0 ? _e : false;
    const actionColumnWidth = getActionColumnWidth(showIndex, rowSelectionEnabled);
    const firstColumnId = (_g = (_f = visibleCells[0]) === null || _f === void 0 ? void 0 : _f.column) === null || _g === void 0 ? void 0 : _g.id;
    const firstDataColumnWidth = firstColumnId
        ? widthMap[firstColumnId] || DEFAULT_DATA_COL_WIDTH
        : DEFAULT_DATA_COL_WIDTH;
    const stickyMergedWidth = actionColumnWidth + firstDataColumnWidth;
    const hasOperateColumn = Boolean((_h = operateColumn === null || operateColumn === void 0 ? void 0 : operateColumn.buttons) === null || _h === void 0 ? void 0 : _h.length);
    const operateColumnWidth = (operateColumn === null || operateColumn === void 0 ? void 0 : operateColumn.width) || DEFAULT_OPERATE_COL_WIDTH;
    return (React.createElement("tr", { className: classNames('ai-table-row grouped-header-row grouped-header-row--collapsible', {
            'grouped-header-row-first': isFirstGroup,
            'grouped-header-row--collapsed': !isExpanded,
            'grouped-header-row--expanded': isExpanded,
        }), style: { height: `${virtualRowSize}px` } },
        React.createElement("td", { className: "ai-table-data-cell ai-table-sticky-column grouped-header-sticky-cell", colSpan: 2, style: {
                width: `${stickyMergedWidth}px`,
                minWidth: `${stickyMergedWidth}px`,
                maxWidth: `${stickyMergedWidth}px`,
                overflow: 'visible',
                wordWrap: 'break-word',
                paddingLeft: 0,
                paddingRight: 0,
            } },
            React.createElement("div", { className: "ai-table-cell-content grouped-header-content grouped-header-content--expandable", role: "button", tabIndex: 0, "aria-expanded": isExpanded, "aria-label": ariaLabel, onClick: handleToggle, onKeyDown: (e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                        handleToggle(e);
                    }
                } },
                React.createElement("div", { className: "grouped-header-expand-slot", style: { width: actionColumnWidth, minWidth: actionColumnWidth } },
                    React.createElement("span", { className: classNames('grouped-header-expand-icon', {
                            'grouped-header-expand-icon--collapsed': !isExpanded,
                        }), "aria-hidden": true },
                        React.createElement(CnIcon, { type: "arrow-down", size: "small" }))),
                React.createElement("div", { className: "grouped-header-value", style: { paddingLeft: `${20 * depth + 8}px` } },
                    React.createElement("div", { className: "grouped-header-value-text" }, groupInfo.groupValue || $i18n.get({ id: 'ContentIsEmpty', dm: '(内容为空)' })),
                    groupInfo.subRowsCount > 0 && (React.createElement("div", { className: "grouped-header-value-count" },
                        groupInfo.subRowsCount,
                        $i18n.get({ id: 'Record', dm: '条记录' })))))),
        visibleCells.length > 1 && (React.createElement("td", { className: "ai-table-data-cell", colSpan: visibleCells.length - 1 },
            React.createElement("div", { className: "ai-table-cell-content" }))),
        hasOperateColumn && (React.createElement("td", { className: "ai-table-data-cell ai-table-operate-column-cell", colSpan: 1, style: {
                width: `${operateColumnWidth}px`,
                minWidth: `${operateColumnWidth}px`,
            } },
            React.createElement("div", { className: "ai-table-cell-content" })))));
};
