import React, { useCallback } from 'react';
import classNames from 'classnames';
import { faSortDown } from '@fortawesome/free-solid-svg-icons/faSortDown';
import { faSortUp } from '@fortawesome/free-solid-svg-icons/faSortUp';
import { faSort } from '@fortawesome/free-solid-svg-icons/faSort';
import { FontAwesomeIcon } from '../../../font-awesome-icon';
import { TruncateWithTooltip } from '../../../truncate-with-tooltip';
import SortableTableThButton from './sortable-table-th-button';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const SortableTableTh = ({
  sortColumnName,
  sortDirection,
  onSortChange = () => {},
  column,
  className,
  ThComponent,
  children,
  name,
  buttonTestId,
  ...props
}) => {
  const sortCallback = useCallback(() => onSortChange(column?.accessor, sortDirection), [onSortChange, column?.accessor]);
  const isActive = sortColumnName === column?.accessor;
  let thProps = {
    ...props,
    className: classNames(className, 'sortable-table-r-th',
    // sometimes we need to have access to specific column's th
    `${column?.accessor}-col`)
  };
  if (!thProps['test-id']) {
    // set default `test-id` only if it has not been defined
    thProps = {
      ...thProps,
      'test-id': thProps.testId || 'sortable-table-r-th'
    };
  }
  const icon = !column?.disabled && isActive && /*#__PURE__*/_jsx(FontAwesomeIcon, {
    icon: sortDirection ? faSortUp : faSortDown,
    className: "sortable-table-order-direction",
    "test-id": "table-sort-direction"
  });
  const inactiveIcon = !column?.disabled && !isActive && /*#__PURE__*/_jsx(FontAwesomeIcon, {
    icon: faSort,
    className: "sortable-table-order-direction",
    "test-id": "table-sort-direction-inactive"
  });
  const thChildren = /*#__PURE__*/_jsx(SortableTableThButton, {
    onClick: sortCallback,
    isDisabled: column?.disabled,
    isActive: isActive,
    testId: buttonTestId,
    children: /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(TruncateWithTooltip, {
        className: "ellipse cell-text-content",
        children: /*#__PURE__*/_jsx("span", {
          name: name,
          "test-id": "th-cell-text-content",
          children: children
        })
      }), icon || inactiveIcon]
    })
  });
  if (ThComponent) {
    return /*#__PURE__*/React.createElement(ThComponent, {
      ...thProps,
      column
    }, thChildren);
  }
  return /*#__PURE__*/_jsx("div", {
    "test-id": thProps['test-id'],
    className: classNames(thProps.className, 'r-th'),
    children: thChildren
  });
};
export default SortableTableTh;