"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ReviewBlock = exports.ReviewItem = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const id_1 = require("../../utilities/id");
const legacy_1 = require("../../utilities/legacy");
const Theme_1 = require("../Theme");
const HeadingGroup_1 = require("../HeadingGroup");
const __1 = require("..");
const ReviewItem_css_1 = __importDefault(require("./ReviewItem.css"));
const createId = id_1.createIdCreator('ReviewBlock');
function ReviewItem({ children, label, to, linkLabel, linkAccessibilityLabel, noWrap, }) {
    const { reviewBlock: { spacing = 'none', divider }, } = Theme_1.useThemeConfiguration();
    const className = css_utilities_1.classNames(ReviewItem_css_1.default.ReviewItem, spacing !== 'none' && ReviewItem_css_1.default.isContainer, legacy_1.utilityDefaultBorderColor, divider === 'toContainerEdge' && ReviewItem_css_1.default.dividerToEdge);
    return (<div role="row" className={className} key={label}>
      <div className={css_utilities_1.classNames(ReviewItem_css_1.default.Wrapper, noWrap && ReviewItem_css_1.default['Wrapper-noWrap'])}>
        <div role="rowheader" className={ReviewItem_css_1.default.Label}>
          <__1.Text subdued>{label}</__1.Text>
        </div>
        <div role="cell" className={ReviewItem_css_1.default.Content}>
          {children}
        </div>
      </div>
      {to ? (<div role="cell">
          <__1.Link to={to} accessibilityLabel={linkAccessibilityLabel}>
            <__1.Text size="small">{linkLabel}</__1.Text>
          </__1.Link>
        </div>) : null}
    </div>);
}
exports.ReviewItem = ReviewItem;
function ReviewBlock({ children, title, titleHidden, }) {
    const id = id_1.useId(undefined, createId);
    const { reviewBlock: { background = 'transparent', spacing = 'none' }, } = Theme_1.useThemeConfiguration();
    const className = css_utilities_1.classNames(ReviewItem_css_1.default.ReviewBlock, background && ReviewItem_css_1.default[css_utilities_1.variationName('ReviewBlock-background', background)], spacing === 'none' && ReviewItem_css_1.default.isContainer, legacy_1.utilityDefaultBorderColor);
    const titleMarkup = <__1.Heading id={id}>{title}</__1.Heading>;
    return (<>
      {titleHidden ? (<__1.View visibility="hidden">{titleMarkup}</__1.View>) : (titleMarkup)}

      <HeadingGroup_1.HeadingGroup>
        <div aria-labelledby={id} role="table" className={className}>
          {children}
        </div>
      </HeadingGroup_1.HeadingGroup>
    </>);
}
exports.ReviewBlock = ReviewBlock;