"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TableSettingsItem = TableSettingsItem;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _faDownLong = require("@fortawesome/free-solid-svg-icons/faDownLong");
var _faUpLong = require("@fortawesome/free-solid-svg-icons/faUpLong");
var _faThumbtack = require("@fortawesome/free-solid-svg-icons/faThumbtack");
var _faGripVertical = require("@fortawesome/free-solid-svg-icons/faGripVertical");
var _checkbox = require("../../../checkbox");
var _truncateWithTooltip = require("../../../truncate-with-tooltip");
var _button = require("../../../button");
var _fontAwesomeIcon = require("../../../font-awesome-icon");
var _hooks = require("../../../hooks");
var _useTranslation = require("../../../hooks/use-translation");
var _types = require("../../types");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function TableSettingsItem({
  index,
  listItem,
  isDragging,
  dropRef,
  tableContainerWidth,
  settings,
  isReorderEnabled,
  handleKeyboardColumnsReorder,
  localizationText
}) {
  const {
    t
  } = (0, _useTranslation.useTranslation)();
  const isPinned = listItem.getIsPinned();
  const sorted = listItem.getIsSorted();
  const isVisible = listItem.getIsVisible();
  const [itemFocused, setItemFocused] = (0, _react.useState)(false);
  const focusWithinProps = (0, _hooks.useFocusWithin)({
    onFocus: () => {
      setItemFocused(true);
    },
    onBlur: () => {
      setItemFocused(false);
    }
  });
  const sortIcon = sorted === _types.SORTING.DESC ? _faDownLong.faDownLong : _faUpLong.faUpLong;
  const nextSorting = listItem.getNextSortingOrder();
  const nextSortIcon = nextSorting === _types.SORTING.DESC ? _faDownLong.faDownLong : _faUpLong.faUpLong;
  const isColumnPinDisabled = !isPinned && (listItem.getSize() + settings.getLeftTotalSize()) / tableContainerWidth > _types.PINNED_WIDTH_THRESHOLD;
  const togglePin = () => {
    if (isPinned) {
      listItem.pin(false);
    } else {
      listItem.pin('left');
    }
  };
  const onKeyDownHandler = e => {
    switch (e.key) {
      case 'ArrowUp':
        e.preventDefault();
        handleKeyboardColumnsReorder(index, index - 1, listItem);
        break;
      case 'ArrowDown':
        e.preventDefault();
        handleKeyboardColumnsReorder(index, index + 1, listItem);
        break;
      default:
        break;
    }
  };
  const visibleColumns = settings.getVisibleLeafColumns().filter(({
    columnDef: {
      meta
    }
  }) => meta?.hideFromSettings !== true);
  const isOneVisible = visibleColumns.length === 1;
  const disableHideColumns = isOneVisible && isVisible;
  return (
    /*#__PURE__*/
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    (0, _jsxRuntime.jsxs)("div", {
      ref: dropRef,
      className: (0, _classnames.default)('table-settings-column', isPinned && 'pinned', sorted && 'sorted', isDragging && 'is-dragging', isReorderEnabled && 'draggable', itemFocused && 'focused-column'),
      "test-id": "table-settings-column-container"
      /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */,
      tabIndex: 0,
      onKeyDown: onKeyDownHandler,
      onFocus: focusWithinProps.onFocus,
      onBlur: focusWithinProps.onBlur,
      "aria-label": localizationText.settingsColumnItemAriaLabel,
      children: [isReorderEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
        icon: _faGripVertical.faGripVertical,
        className: "table-settings-column-drag-handler"
      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.Checkbox, {
        id: `checkbox-${listItem.id}`,
        testId: `visibility-checkbox-${listItem.id}`,
        isChecked: isVisible,
        isDisabled: disableHideColumns,
        tooltipText: disableHideColumns ? t('At least one column must stay selected') : undefined,
        onChange: listItem.getToggleVisibilityHandler(),
        className: "table-settings-checkbox",
        ariaLabel: listItem.columnDef.header
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
        className: "react-table-cell-text",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: "table-section-text",
          "test-id": "table-react-settings-column-name",
          children: listItem.columnDef.header
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "table-settings-splitter"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "table-settings-sort-wrapper",
        children: listItem.getCanSort() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
          accentType: _button.ACCENT_TYPES.ROUND_ICON,
          className: (0, _classnames.default)('table-section-handler', 'sort-handler', !sorted && 'not-active-handler'),
          size: _button.BUTTON_SIZES.XS,
          onClick: listItem.getToggleSortingHandler(),
          testId: "settings-sort-handler",
          "aria-label": localizationText.settingsItemSortAriaLabel,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
            icon: sorted ? sortIcon : nextSortIcon
          })
        })
      }), listItem.getCanPin() && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "table-settings-pin-wrapper",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
          className: (0, _classnames.default)('table-section-handler', 'pin-handler', !isPinned && 'not-active-handler'),
          accentType: _button.ACCENT_TYPES.ROUND_ICON,
          size: _button.BUTTON_SIZES.XS,
          onClick: togglePin,
          testId: "settings-pin-handler",
          isDisabled: isColumnPinDisabled,
          tooltipText: isColumnPinDisabled ? localizationText?.disabledPinText : null,
          "aria-label": localizationText.settingsItemPinnedAriaLabel,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
            icon: _faThumbtack.faThumbtack
          })
        })
      })]
    }, listItem.id)
  );
}