"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Layout = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const units_1 = require("../../utilities/units");
const id_1 = require("../../utilities/id");
const Layout_css_1 = __importDefault(require("./Layout.css"));
const MEDIAQUERY_MAP = new Map([
    ['small', '@media all and (max-width: 749px)'],
    ['medium', '@media all and (min-width: 750px) and (max-width: 1199px)'],
    ['large', '@media all and (min-width: 1200px)'],
]);
const createId = id_1.createIdCreator('Layout');
function Layout({ inlineAlignment, blockAlignment, maxInlineSize, sizes, media, children, }) {
    const uniqueClassName = createId();
    const CSSSelector = `.${uniqueClassName} > .${Layout_css_1.default.LayoutInner}`;
    const layoutClassName = css_utilities_1.classNames(Layout_css_1.default.Layout, uniqueClassName, blockAlignment && Layout_css_1.default[css_utilities_1.variationName('blockAlignment', blockAlignment)], inlineAlignment &&
        Layout_css_1.default[css_utilities_1.variationName('inlineAlignment', inlineAlignment)]);
    const layoutInnerClassName = css_utilities_1.classNames(Layout_css_1.default.LayoutInner, inlineAlignment &&
        Layout_css_1.default[css_utilities_1.variationName('LayoutInner-inlineAlignment', inlineAlignment)]);
    const defaults = {
        viewportSize: 'default',
        sizes,
        maxInlineSize,
    };
    const layoutStyles = media
        ? generateMediaStyles(CSSSelector, [defaults, ...media])
        : generateMediaStyles(CSSSelector, [defaults]);
    return (<>
      <div className={layoutClassName}>
        <style>{layoutStyles}</style>
        <div className={layoutInnerClassName}>{children}</div>
      </div>
    </>);
}
exports.Layout = Layout;
function generateSizesStyles(selector, sizes) {
    return sizes.reduce((acc, basicSize, index) => {
        const canGrow = basicSize === 'fill';
        const canShrink = typeof basicSize !== 'number';
        const size = typeof basicSize === 'number' ? units_1.pixelOrPercent(basicSize) : 'auto';
        const inlineStyles = `
        ${selector} > :nth-child(${index + 1}) {
          flex: ${canGrow ? '1' : '0'} ${canShrink ? '1' : '0'} ${size};
          max-width: ${size};
        }
      `;
        return [acc, inlineStyles].join(' ');
    }, '');
}
function generateMediaStyles(selector, media) {
    return media.reduce((acc, { viewportSize, maxInlineSize, sizes }) => {
        const sizesStyles = sizes && generateSizesStyles(selector, sizes);
        const wrappingStyles = (sizes === null || sizes === void 0 ? void 0 : sizes.includes(1)) ? `${selector} { flex-wrap: wrap; }`
            : '';
        const maxInlineSizeStyles = maxInlineSize
            ? `${selector} { max-width: ${units_1.pixelOrPercent(maxInlineSize)}; }`
            : '';
        const mediaStyles = [sizesStyles, wrappingStyles, maxInlineSizeStyles];
        const inlineStyles = viewportSize === 'default' ||
            typeof MEDIAQUERY_MAP.get(viewportSize) === 'undefined'
            ? mediaStyles
            : [MEDIAQUERY_MAP.get(viewportSize), '{', ...mediaStyles, '}'];
        return [acc, ...inlineStyles].join(' ');
    }, '');
}