"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 responsive_1 = require("../../utilities/responsive");
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 (min-width: 750px)'],
    ['medium', '@media all and (min-width: 1000px)'],
    ['large', '@media all and (min-width: 1200px)'],
]);
const createId = id_1.createIdCreator('Layout');
function Layout({ inlineAlignment = 'center', blockAlignment = 'leading', maxInlineSize, sizes, spacing, children, }) {
    const uniqueClassName = createId();
    const CSSSelector = `.${uniqueClassName} > .${Layout_css_1.default.LayoutInner}`;
    const responsiveClassNames = responsive_1.useResponsive({ spacing });
    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)], blockAlignment &&
        Layout_css_1.default[css_utilities_1.variationName('LayoutInner-blockAlignment', blockAlignment)], responsiveClassNames &&
        responsiveClassNames.map((className) => Layout_css_1.default[`LayoutInner-${className}`]));
    const layoutStyles = [
        sizes && generateSizesStyle(CSSSelector, sizes),
        maxInlineSize && generateMaxInlineSizeStyles(CSSSelector, maxInlineSize),
    ].join(' ');
    return (<div className={layoutClassName}>
      {Boolean(layoutStyles.trim()) && <style>{layoutStyles}</style>}
      <div className={layoutInnerClassName}>
        {react_1.default.Children.map(children, (child) => (<div className={css_utilities_1.classNames(Layout_css_1.default.LayoutInnerSpacing, responsiveClassNames &&
        responsiveClassNames.map((className) => Layout_css_1.default[`LayoutInnerSpacing-${className}`]))}>
            <div>{child}</div>
          </div>))}
      </div>
    </div>);
}
exports.Layout = Layout;
function generateSizesStyles(selector, sizes) {
    return sizes.reduce((acc, basicSize, index) => {
        const mustFill = basicSize === 'fill';
        const sizeStyles = typeof basicSize === 'number'
            ? `flex: 0 0 ${units_1.pixelOrPercent(basicSize)};`
            : 'flex: 0 1 auto;';
        const inlineStyles = `
        ${selector} > :nth-child(${index + 1}) {
          ${mustFill ? 'flex: 1 0px;' : `${sizeStyles}`}
        }
      `;
        return [acc, inlineStyles].join(' ');
    }, '');
}
function generateSizesStyle(selector, sizes) {
    if (Array.isArray(sizes) || typeof sizes !== 'object') {
        const sizesStyles = sizes && generateSizesStyles(selector, sizes);
        const wrappingStyles = (sizes === null || sizes === void 0 ? void 0 : sizes.includes(1)) ? `${selector} { flex-wrap: wrap; }`
            : `${selector} { flex-wrap: nowrap; }`;
        return [sizesStyles, wrappingStyles].join(' ');
    }
    return Object.entries(sizes).reduce((acc, [breakpoint, sizes]) => {
        const sizesStyles = sizes && generateSizesStyles(selector, sizes);
        const wrappingStyles = (sizes === null || sizes === void 0 ? void 0 : sizes.includes(1)) ? `${selector} { flex-wrap: wrap; }`
            : `${selector} { flex-wrap: nowrap; }`;
        const mediaStyles = [sizesStyles, wrappingStyles];
        const inlineStyles = breakpoint === 'base'
            ? mediaStyles
            : [
                MEDIAQUERY_MAP.get(breakpoint),
                '{',
                ...mediaStyles,
                '}',
            ];
        return [acc, ...inlineStyles].join(' ');
    }, '');
}
function generateMaxInlineSizeStyles(selector, maxInlineSize) {
    if (typeof maxInlineSize !== 'object') {
        return maxInlineSize
            ? `${selector} { max-width: ${units_1.pixelOrPercent(maxInlineSize)}; }`
            : '';
    }
    return Object.entries(maxInlineSize).reduce((acc, [breakpoint, maxInlineSize]) => {
        const maxInlineSizeStyles = maxInlineSize
            ? `${selector} { max-width: ${units_1.pixelOrPercent(maxInlineSize)}; }`
            : '';
        const inlineStyles = breakpoint === 'base'
            ? [maxInlineSizeStyles]
            : [
                MEDIAQUERY_MAP.get(breakpoint),
                '{',
                maxInlineSizeStyles,
                '}',
            ];
        return [acc, ...inlineStyles].join(' ');
    }, '');
}