"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.convertPadding = exports.View = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const responsive_1 = require("../../utilities/responsive");
const View_css_1 = __importDefault(require("./View.css"));
/**
 * A View is a generic container component. Its contents will always be their
 * “natural” size, so this component can be useful in layout components (like `Layout`, `Tiles`,
 * `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit.
 */
function View(_a) {
    var { blockPadding, inlinePadding, padding, children, media } = _a, props = __rest(_a, ["blockPadding", "inlinePadding", "padding", "children", "media"]);
    // Support Argo blockPadding & inlinePadding props
    const useArgoPadding = !padding && (blockPadding || inlinePadding);
    const responsiveClassNames = responsive_1.useResponsive(Object.assign(Object.assign({}, props), { padding: useArgoPadding
            ? convertPadding(blockPadding, inlinePadding)
            : padding }), media);
    return (<div className={css_utilities_1.classNames(View_css_1.default.View, responsiveClassNames &&
        responsiveClassNames.map((className) => View_css_1.default[className]))}>
      {children}
    </div>);
}
exports.View = View;
// TODO: remove when no longer supported in favor of padding
function convertPadding(blockPadding, inlinePadding) {
    const padding = (padding) => {
        switch (padding) {
            case 'base':
                return 'base';
            case 'tight':
                return 'tight1x';
            case 'extraTight':
                return 'tight4x';
            case 'loose':
                return 'loose1x';
            case 'extraLoose':
                return 'loose4x';
            default:
                return 'none';
        }
    };
    return [padding(blockPadding), padding(inlinePadding)];
}
exports.convertPadding = convertPadding;