"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Image = exports.MEDIA_MAP = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const HiddenForAccessibility_1 = require("../HiddenForAccessibility");
const Image_css_1 = __importDefault(require("./Image.css"));
exports.MEDIA_MAP = new Map([
    ['small', '(max-width: 600px)'],
    ['medium', '(max-width: 1200px)'],
    ['large', '(min-width: 1201px)'],
]);
function Image({ source, sources, description = '', fit, bordered, loading, aspectRatio, decorative, }) {
    const initialValue = [];
    const sourcesMarkup = sources &&
        sources
            .reduce((sourcesProps, { source, viewportSize, resolution }) => {
            const media = viewportSize && exports.MEDIA_MAP.get(viewportSize);
            const maybeSourceProps = sourcesProps.find(({ media: mediaValue }) => media === mediaValue);
            const srcSet = [source, resolution && `${resolution}x`]
                .join(' ')
                .trim();
            if (maybeSourceProps) {
                maybeSourceProps.srcSet += `, ${srcSet}`;
                return sourcesProps;
            }
            else {
                return [...sourcesProps, { media, srcSet }];
            }
        }, initialValue)
            // eslint-disable-next-line react/jsx-key
            .map((props) => <source {...props}/>);
    const className = css_utilities_1.classNames(Image_css_1.default.Image, bordered && Image_css_1.default.bordered, fit && Image_css_1.default[css_utilities_1.variationName('fit', fit)]);
    return (<MaybeHiddenForA11y condition={decorative === true}>
      <MaybeAspectRatio condition={aspectRatio != null} aspectRatio={aspectRatio}>
        <MaybePicture condition={sourcesMarkup != null}>
          {sourcesMarkup}
          <img src={source} alt={description} className={className} loading={loading}/>
        </MaybePicture>
      </MaybeAspectRatio>
    </MaybeHiddenForA11y>);
}
exports.Image = Image;
function MaybeHiddenForA11y({ children, condition, }) {
    return condition ? (<HiddenForAccessibility_1.HiddenForAccessibility>{children}</HiddenForAccessibility_1.HiddenForAccessibility>) : (<>{children}</>);
}
function MaybeAspectRatio({ children, condition, aspectRatio, }) {
    return condition ? (<div className={Image_css_1.default.aspectRatio} style={{ paddingBottom: `calc(100% / ${aspectRatio})` }}>
      {children}
    </div>) : (<>{children}</>);
}
function MaybePicture({ children, condition }) {
    return condition ? <picture>{children}</picture> : <>{children}</>;
}