import React, { useState } from 'react';
import classnames from 'classnames';
import { faDownLong } from '@fortawesome/free-solid-svg-icons/faDownLong';
import { faUpLong } from '@fortawesome/free-solid-svg-icons/faUpLong';
import { faThumbtack } from '@fortawesome/free-solid-svg-icons/faThumbtack';
import { faGripVertical } from '@fortawesome/free-solid-svg-icons/faGripVertical';
import { Checkbox } from '../../../checkbox';
import { TruncateWithTooltip } from '../../../truncate-with-tooltip';
import { ACCENT_TYPES, Button, BUTTON_SIZES } from '../../../button';
import { FontAwesomeIcon } from '../../../font-awesome-icon';
import { useFocusWithin } from '../../../hooks';
import { useTranslation } from '../../../hooks/use-translation';
import { PINNED_WIDTH_THRESHOLD, SORTING } from '../../types';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function TableSettingsItem({
  index,
  listItem,
  isDragging,
  dropRef,
  tableContainerWidth,
  settings,
  isReorderEnabled,
  handleKeyboardColumnsReorder,
  localizationText
}) {
  const {
    t
  } = useTranslation();
  const isPinned = listItem.getIsPinned();
  const sorted = listItem.getIsSorted();
  const isVisible = listItem.getIsVisible();
  const [itemFocused, setItemFocused] = useState(false);
  const focusWithinProps = useFocusWithin({
    onFocus: () => {
      setItemFocused(true);
    },
    onBlur: () => {
      setItemFocused(false);
    }
  });
  const sortIcon = sorted === SORTING.DESC ? faDownLong : faUpLong;
  const nextSorting = listItem.getNextSortingOrder();
  const nextSortIcon = nextSorting === SORTING.DESC ? faDownLong : faUpLong;
  const isColumnPinDisabled = !isPinned && (listItem.getSize() + settings.getLeftTotalSize()) / tableContainerWidth > 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
    _jsxs("div", {
      ref: dropRef,
      className: classnames('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__*/_jsx(FontAwesomeIcon, {
        icon: faGripVertical,
        className: "table-settings-column-drag-handler"
      }) : null, /*#__PURE__*/_jsx(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__*/_jsx(TruncateWithTooltip, {
        className: "react-table-cell-text",
        children: /*#__PURE__*/_jsx("span", {
          className: "table-section-text",
          "test-id": "table-react-settings-column-name",
          children: listItem.columnDef.header
        })
      }), /*#__PURE__*/_jsx("div", {
        className: "table-settings-splitter"
      }), /*#__PURE__*/_jsx("div", {
        className: "table-settings-sort-wrapper",
        children: listItem.getCanSort() && /*#__PURE__*/_jsx(Button, {
          accentType: ACCENT_TYPES.ROUND_ICON,
          className: classnames('table-section-handler', 'sort-handler', !sorted && 'not-active-handler'),
          size: BUTTON_SIZES.XS,
          onClick: listItem.getToggleSortingHandler(),
          testId: "settings-sort-handler",
          "aria-label": localizationText.settingsItemSortAriaLabel,
          children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
            icon: sorted ? sortIcon : nextSortIcon
          })
        })
      }), listItem.getCanPin() && /*#__PURE__*/_jsx("div", {
        className: "table-settings-pin-wrapper",
        children: /*#__PURE__*/_jsx(Button, {
          className: classnames('table-section-handler', 'pin-handler', !isPinned && 'not-active-handler'),
          accentType: ACCENT_TYPES.ROUND_ICON,
          size: BUTTON_SIZES.XS,
          onClick: togglePin,
          testId: "settings-pin-handler",
          isDisabled: isColumnPinDisabled,
          tooltipText: isColumnPinDisabled ? localizationText?.disabledPinText : null,
          "aria-label": localizationText.settingsItemPinnedAriaLabel,
          children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
            icon: faThumbtack
          })
        })
      })]
    }, listItem.id)
  );
}