"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 View_1 = require("../View");
const breakpoint_1 = require("../../utilities/breakpoint");
const Image_css_1 = __importDefault(require("./Image.css"));
exports.MEDIA_MAP = new Map(breakpoint_1.createMediaQueries({ addMaxWidth: false }).map(({ breakpoint, query }) => [
    breakpoint,
    query,
]));
function Image({ source, sources, description = '', fit, loading, aspectRatio, decorative, }) {
    const sourcesMarkup = sources &&
        Object.entries(sources)
            .sort(([firstBreakpoint], [secondBreakpoint]) => {
            const firstWidth = breakpoint_1.BREAKPOINTS[firstBreakpoint];
            const secondWidth = breakpoint_1.BREAKPOINTS[secondBreakpoint];
            if (firstWidth != null && secondWidth != null) {
                return secondWidth - firstWidth;
            }
            return 0;
        })
            .map(([viewportSize, sizeSources]) => {
            if (typeof sizeSources === 'string') {
                return [viewportSize, [{ source: sizeSources }]];
            }
            if (!Array.isArray(sizeSources) && sizeSources !== undefined) {
                return [viewportSize, [sizeSources]];
            }
            return [viewportSize, sizeSources];
        })
            .map(([viewportSize, sizeSources]) => {
            const media = exports.MEDIA_MAP.get(viewportSize);
            if (media !== undefined && Array.isArray(sizeSources)) {
                const srcSet = sizeSources
                    .map(({ source, resolution }) => [source, resolution && `${resolution}x`].join(' ').trim())
                    .join(', ');
                return <source key={media} media={media} srcSet={srcSet}/>;
            }
        });
    const className = css_utilities_1.classNames(Image_css_1.default.Image, 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 ? (<View_1.View accessibilityVisibility="hidden">{children}</View_1.View>) : (<>{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}</>;
}