import React from 'react';
import classNames from 'classnames';
import { Tooltip, TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
import { useNonNativeButtonAttrs } from '../hooks';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const TOP_LINE_COLOR = {
  BLUE: 'blue',
  ORANGE: 'orange',
  GREEN: 'green',
  RED: 'red'
};

/**
 * Customizable generic card
 * @uxr-only-supported
 * @midnight-gray-supported
 * @alpine-light-supported
 * */
function CustomCard({
  children,
  className,
  testId,
  onClick,
  ariaLabel,
  isDisabled,
  tooltipContent,
  isSelected,
  topLineColor,
  interactiveFooter,
  tooltipProps = {}
}) {
  const attrs = useNonNativeButtonAttrs({
    isDisabled: !onClick || isDisabled,
    onClick,
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    onKeyDown: onClick
  });
  const containerClassName = classNames('custom-card-container', {
    'with-top-line': !!topLineColor,
    'with-interactive-footer': !!interactiveFooter,
    selected: isSelected,
    disabled: isDisabled,
    clickable: !interactiveFooter && onClick && !isDisabled
  }, topLineColor, className);
  const clickableContentClassName = classNames('clickable-content-area', {
    clickable: !isDisabled
  });
  const cardContent = /*#__PURE__*/_jsx(Tooltip, {
    placement: TOOLTIP_PLACEMENT_TYPES.TOP,
    content: tooltipContent,
    ...tooltipProps,
    children: /*#__PURE__*/_jsx("div", {
      ...(!interactiveFooter ? {
        'test-id': testId
      } : {}),
      role: attrs.role,
      onClick: attrs.onClick,
      onKeyDown: attrs.onKeyDown,
      tabIndex: attrs.tabIndex,
      "aria-disabled": attrs['aria-disabled'],
      "aria-label": ariaLabel,
      className: interactiveFooter ? clickableContentClassName : containerClassName,
      children: interactiveFooter ? /*#__PURE__*/_jsx("div", {
        className: "card-content-wrapper",
        children: children
      }) : children
    })
  });

  // Clickable card with interactive footer
  if (interactiveFooter && onClick) {
    return /*#__PURE__*/_jsxs("div", {
      ...(interactiveFooter ? {
        'test-id': testId
      } : {}),
      className: containerClassName,
      children: [cardContent, /*#__PURE__*/_jsx("div", {
        className: "card-footer-wrapper",
        children: interactiveFooter
      })]
    });
  }
  return cardContent;
}
export default CustomCard;