import React from 'react';
import classnames from 'classnames';
import { SelectableTilesItem } from './selectable-tiles-item';
import { SELECTABLE_TILES_SIZES } from './types';
import { jsx as _jsx } from "react/jsx-runtime";
/** SelectableTiles let user choose on of the options represented in the form of tiles
 * [CAPITALIZATION] Sentence case (capitalize proper nouns i.e., Holdout).
 * @midnight-gray-supported
 * @alpine-light-supported
 */
function SelectableTiles({
  options,
  selectedKey,
  onItemSelect,
  containerClassName,
  itemClassName,
  optionId = 'id',
  isDisabled,
  labelledBy,
  size = SELECTABLE_TILES_SIZES.MD
}) {
  const onSelect = key => {
    if (key === selectedKey) {
      return;
    }
    onItemSelect?.(key);
  };
  return /*#__PURE__*/_jsx("div", {
    className: classnames('selectable-tiles-container', containerClassName),
    "test-id": "selectable-tiles-container",
    role: "radiogroup",
    "aria-labelledby": labelledBy,
    children: options.map(optionItem => {
      const {
        id,
        label,
        icon,
        isDisabled: itemDisabled,
        imgSrc,
        itemTestId,
        customContent,
        tooltipText,
        tooltipPlacement,
        className,
        itemAriaLabel
      } = optionItem;
      const tileId = optionId ? optionItem[optionId] : id;
      return /*#__PURE__*/_jsx(SelectableTilesItem, {
        id: tileId,
        label: label,
        imgSrc: imgSrc,
        itemTestId: itemTestId,
        icon: icon,
        isDisabled: itemDisabled || isDisabled,
        selectedKey: selectedKey,
        onItemSelect: onSelect,
        itemClassName: classnames(itemClassName, className),
        customContent: customContent,
        tooltipText: tooltipText,
        tooltipPlacement: tooltipPlacement,
        itemAriaLabel: itemAriaLabel,
        size: size
      }, tileId);
    })
  });
}
export default SelectableTiles;