"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ListCard = ListCard;
exports.TRUNCATION_METHODS = void 0;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _faCircleNotch = require("@fortawesome/free-solid-svg-icons/faCircleNotch");
var _faChevronRight = require("@fortawesome/free-solid-svg-icons/faChevronRight");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _truncateWithTooltip = require("../truncate-with-tooltip");
var _message = require("../message");
var _hooks = require("../hooks");
var _tooltip = require("../tooltip");
var _useTranslation = require("../hooks/use-translation");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const TRUNCATION_METHODS = exports.TRUNCATION_METHODS = {
  TOOLTIP: 'tooltip',
  // Display the full title on a tooltip – NOTE: May conflict with showTooltip
  NEWLINE: 'newline' // Break into new lines (Default)
};
/**
 * @midnight-gray-supported
 * @alpine-light-supported
 */
function ListCard({
  className,
  isInteractive = true,
  isDisabled = false,
  isActive = false,
  hasErrored = false,
  isLoading = false,
  onClick = () => {},
  testId = 'list-card',
  icon,
  ariaLabelLoading: ariaLabelLoadingParams,
  iconTestId = 'list-card-glyph',
  titleContent = null,
  detailsContent = null,
  controlsContent = null,
  errorMessage = null,
  showChevron = true,
  tooltipContent = null,
  tooltipPlacement = _tooltip.TOOLTIP_PLACEMENT_TYPES.LEFT,
  showTooltip,
  truncationMethod = TRUNCATION_METHODS.NEWLINE,
  showControlsOnLoading = false,
  listCardRole
}) {
  const {
    t
  } = (0, _useTranslation.useTranslation)();
  const ariaLabelLoading = ariaLabelLoadingParams ?? t('Loading');
  const attrs = (0, _hooks.useNonNativeButtonAttrs)({
    isDisabled,
    onClick,
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    onKeyDown: onClick
  });
  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)('list-card', className, {
      disabled: isDisabled,
      active: isActive,
      error: hasErrored,
      interactive: isInteractive && !isDisabled
    }),
    "test-id": testId,
    "aria-label": isLoading ? ariaLabelLoading : undefined,
    ...(isInteractive && attrs),
    ...(listCardRole && {
      role: listCardRole
    }),
    children: [isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "list-card-glyph",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
        icon: _faCircleNotch.faCircleNotch
        // fa-fw is needed to ensure lists of cards with different icons have the same aside width
        ,
        className: "fa-fw",
        spin: true,
        "test-id": iconTestId
      })
    }) : icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "list-card-glyph",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
        icon: icon
        // fa-fw is needed to ensure lists of cards with different icons have the same aside width
        ,
        className: "fa-fw",
        "test-id": iconTestId
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "list-card-main",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _classnames.default)('list-card-title', {
          'break-lines': truncationMethod === TRUNCATION_METHODS.NEWLINE,
          skeleton: !titleContent && isLoading
        }),
        "test-id": "list-card-title",
        children: truncationMethod === TRUNCATION_METHODS.TOOLTIP ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            children: titleContent
          })
        }) : titleContent
      }), (isLoading || !!detailsContent) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _classnames.default)('list-card-details', {
          skeleton: isLoading && !detailsContent
        }),
        "test-id": "list-card-details",
        children: detailsContent
      }), hasErrored && errorMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_message.Message, {
        type: _message.MESSAGE_TYPES.ERROR,
        testId: "list-card-error-message",
        children: errorMessage
      }) : null]
    }), (!isLoading || showControlsOnLoading) && (showChevron || controlsContent) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "list-card-controls",
      "test-id": "list-card-controls",
      children: controlsContent || showChevron && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
        icon: _faChevronRight.faChevronRight,
        className: "list-card-chevron",
        "test-id": "list-card-controls-icon"
      })
    })]
  });
  return showTooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
    content: tooltipContent,
    placement: tooltipPlacement,
    children: content
  }) : content;
}