import React from 'react';
import classnames from 'classnames';
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons/faCircleNotch';
import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { TruncateWithTooltip } from '../truncate-with-tooltip';
import { Message, MESSAGE_TYPES } from '../message';
import { useNonNativeButtonAttrs } from '../hooks';
import { Tooltip, TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const 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
 */
export 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_PLACEMENT_TYPES.LEFT,
  showTooltip,
  truncationMethod = TRUNCATION_METHODS.NEWLINE,
  showControlsOnLoading = false,
  listCardRole
}) {
  const {
    t
  } = useTranslation();
  const ariaLabelLoading = ariaLabelLoadingParams ?? t('Loading');
  const attrs = useNonNativeButtonAttrs({
    isDisabled,
    onClick,
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    onKeyDown: onClick
  });
  const content = /*#__PURE__*/_jsxs("div", {
    className: classnames('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__*/_jsx("div", {
      className: "list-card-glyph",
      children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
        icon: 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__*/_jsx("div", {
      className: "list-card-glyph",
      children: /*#__PURE__*/_jsx(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__*/_jsxs("div", {
      className: "list-card-main",
      children: [/*#__PURE__*/_jsx("div", {
        className: classnames('list-card-title', {
          'break-lines': truncationMethod === TRUNCATION_METHODS.NEWLINE,
          skeleton: !titleContent && isLoading
        }),
        "test-id": "list-card-title",
        children: truncationMethod === TRUNCATION_METHODS.TOOLTIP ? /*#__PURE__*/_jsx(TruncateWithTooltip, {
          children: /*#__PURE__*/_jsx("span", {
            children: titleContent
          })
        }) : titleContent
      }), (isLoading || !!detailsContent) && /*#__PURE__*/_jsx("div", {
        className: classnames('list-card-details', {
          skeleton: isLoading && !detailsContent
        }),
        "test-id": "list-card-details",
        children: detailsContent
      }), hasErrored && errorMessage ? /*#__PURE__*/_jsx(Message, {
        type: MESSAGE_TYPES.ERROR,
        testId: "list-card-error-message",
        children: errorMessage
      }) : null]
    }), (!isLoading || showControlsOnLoading) && (showChevron || controlsContent) && /*#__PURE__*/_jsx("div", {
      className: "list-card-controls",
      "test-id": "list-card-controls",
      children: controlsContent || showChevron && /*#__PURE__*/_jsx(FontAwesomeIcon, {
        icon: faChevronRight,
        className: "list-card-chevron",
        "test-id": "list-card-controls-icon"
      })
    })]
  });
  return showTooltip ? /*#__PURE__*/_jsx(Tooltip, {
    content: tooltipContent,
    placement: tooltipPlacement,
    children: content
  }) : content;
}