import React from 'react';
import classnames from 'classnames';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { Tooltip, TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export function SelectableTilesItem({
  id,
  label,
  imgSrc,
  icon,
  itemTestId,
  size,
  selectedKey,
  onItemSelect,
  isDisabled,
  itemClassName,
  itemAriaLabel,
  customContent,
  tooltipText,
  tooltipPlacement = TOOLTIP_PLACEMENT_TYPES.RIGHT
}) {
  const isItemSelected = id === selectedKey;
  const handleClick = () => {
    if (!isDisabled) {
      onItemSelect?.(id);
    }
  };
  const handleKeyDown = event => {
    if (event.key === ' ' && !isDisabled) {
      event.preventDefault();
      onItemSelect?.(id);
    }
  };
  function renderContent() {
    if (customContent) {
      return customContent;
    }
    return /*#__PURE__*/_jsx(StandardContent, {
      label: label,
      imgSrc: imgSrc,
      icon: icon
    });
  }
  return /*#__PURE__*/_jsx(Tooltip, {
    content: tooltipText,
    placement: tooltipPlacement,
    children: /*#__PURE__*/_jsx("div", {
      className: classnames('selectable-tiles-item', itemClassName, size, {
        'selectable-tiles-item-selected': isItemSelected,
        'selectable-tiles-item-disabled': isDisabled,
        'label-with-image': !!imgSrc
      }),
      onClick: handleClick,
      onKeyDown: handleKeyDown,
      "test-id": itemTestId || 'selectable-tiles-item',
      role: "radio",
      "aria-label": itemAriaLabel,
      "aria-checked": isItemSelected,
      tabIndex: 0,
      children: renderContent()
    })
  });
}
function StandardContent({
  imgSrc,
  icon,
  label
}) {
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [imgSrc ? /*#__PURE__*/_jsx("div", {
      className: "selectable-tiles-item-image-container",
      "test-id": "selectable-tiles-item-image",
      children: /*#__PURE__*/_jsx("img", {
        alt: label,
        src: imgSrc,
        className: "selectable-tiles-item-image"
      })
    }) : null, icon ? /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: icon,
      className: "selectable-tiles-item-icon",
      "test-id": "selectable-tiles-item-icon"
    }) : null, /*#__PURE__*/_jsx("p", {
      className: "selectable-tiles-item-label",
      children: label
    })]
  });
}