src/components/templates/ItemDetails/Group/Type1/groupType1.jsx

import React from "react";
import {useCell} from "hooks";
import {Text, View, Radio} from "components/elementsThemed";
import {helpers, Copy} from "utils";
import css from "./groupType1.module.scss";

/**
 * Renders UI for items inside of a subgroup for type1 (radio button)
 *
 * @param {object} props
 * @param {number} props.items - From BeamImpact
 * @param {string} props.selected - Checkout Step
 * @param {object} props.error - State in pages/Cart/routes.jsx
 * @param {object} props.types - Theme file cell types
 * @param {object} props.types.group - Theme for container that holds subgroup items
 * @param {object} props.types.default - State in pages/Cart/routes.jsx
 * @param {object} props.types.selected - State in pages/Cart/routes.jsx
 * @param {Function} props.onSelect - When a subgroup item is selected
 */
const GroupType1 = ({items, selected, types, onSelect, error}) => {
  const {views: groupViews, labelTextStyles: groupLabelTextStyles} = useCell(
    types.group,
  );
  const {buttons, labelTextStyles: defaultLabelTextStyles} = useCell(
    types.default,
  );

  const onClick = (id) => () => {
    onSelect(id);
  };

  return (
    <div className={css.itemDetailsGroups}>
      <View
        type={groupViews.background}
        className={css["itemDetailsGroups-title"]}
      >
        <Text type={groupLabelTextStyles.primary}>
          {Copy.ITEM_DETAILS_STATIC.SELECT_TEXT}
        </Text>
        {error && (
          <div>
            <Text type={groupLabelTextStyles.tertiary}>
              {Copy.ITEM_DETAILS_STATIC.SELECTION_EMPTY_ERROR}
            </Text>
          </div>
        )}
      </View>
      {items.map((i) => (
        <View
          key={i.id}
          className={css["itemDetailsGroups-item"]}
          onClick={onClick(i.id)}
        >
          <div className={css["itemDetailsGroups-item--left"]}>
            <Text type={defaultLabelTextStyles.primary}>{i.name}</Text>
            <Text type={defaultLabelTextStyles.secondary}>{i.description}</Text>
          </div>
          <div className={css["itemDetailsGroups-item--right"]}>
            <Text
              type={defaultLabelTextStyles.secondary}
              className={css["itemDetailsGroups-item--price"]}
            >
              {helpers.formatPrice(i.price)}
            </Text>
            <Radio
              type={buttons.primary}
              className={css["itemDetailsGroups-item--radio"]}
              value={i.id === selected}
              onChange={onClick}
            />
          </div>
        </View>
      ))}
    </div>
  );
};

export default React.memo(GroupType1);