import React, { useCallback, useContext } from 'react';
import { action, get, set } from 'mobx';
import { observer } from 'mobx-react-lite';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import ResizeObservedRow from './ResizeObservedRow';
import TableContext from './TableContext';
import { isStickySupport } from './utils';

var TableHeaderRow = function TableHeaderRow(props) {
  var rowIndex = props.rowIndex,
      lock = props.lock,
      children = props.children,
      rows = props.rows;

  var _useContext = useContext(TableContext),
      rowHeight = _useContext.rowHeight,
      tableStore = _useContext.tableStore;

  var setRowHeight = useCallback(action(function (index, height) {
    set(tableStore.lockColumnsHeadRowsHeight, index, height);
  }), [tableStore]);

  var getRowHeight = function getRowHeight(index) {
    return get(tableStore.lockColumnsHeadRowsHeight, index) || 0;
  };

  var getHeaderRowStyle = function getHeaderRowStyle() {
    var height = getRowHeight(rowIndex);
    return pxToRem(rows.slice(rowIndex + 1).reduce(function (total, r, index) {
      return r.length ? total : total + getRowHeight(index + rowIndex + 1);
    }, height), true);
  };

  var needStoreRowHeight = !isStickySupport() && (tableStore.headerRowHeight === 'auto' || rowHeight === 'auto' || rows.length > 1);
  var style = lock && needStoreRowHeight ? {
    height: getHeaderRowStyle()
  } : undefined;
  var tr = /*#__PURE__*/React.createElement("tr", {
    style: style
  }, children);
  return !lock && needStoreRowHeight ? /*#__PURE__*/React.createElement(ResizeObservedRow, {
    onResize: setRowHeight,
    rowIndex: rowIndex
  }, tr) : tr;
};

TableHeaderRow.displayName = 'TableHeaderRow';
export default observer(TableHeaderRow);
//# sourceMappingURL=TableHeaderRow.js.map
