"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.View = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const responsive_1 = require("../../utilities/responsive");
const responsiveValue_1 = require("../../utilities/responsiveValue");
const units_1 = require("../../utilities/units");
const View_css_1 = __importDefault(require("./View.css"));
const ELEMENT_MAP = new Map([
    ['region', 'section'],
    ['complementary', 'aside'],
]);
function View(_a) {
    var _b;
    var { accessibilityLabel, accessibilityVisibility, backgroundFit, backgroundImage, backgroundPosition = 'center', backgroundRepeat = false, children, display = 'block', id, maxInlineSize, role, visibility } = _a, props = __rest(_a, ["accessibilityLabel", "accessibilityVisibility", "backgroundFit", "backgroundImage", "backgroundPosition", "backgroundRepeat", "children", "display", "id", "maxInlineSize", "role", "visibility"]);
    const responsiveClassNames = responsive_1.useResponsive(props);
    const responsiveStyle = responsiveValue_1.useResponsiveStyle({
        backgroundImage: {
            value: backgroundImage,
            transform: (value) => `url(${JSON.stringify(value)})`,
        },
        maxWidth: {
            value: maxInlineSize,
            transform: (value) => units_1.pixelOrPercent(value),
        },
    });
    const Element = (_b = (role && ELEMENT_MAP.get(role))) !== null && _b !== void 0 ? _b : 'div';
    return (<Element className={css_utilities_1.classNames(View_css_1.default.View, backgroundImage &&
        backgroundFit &&
        View_css_1.default[css_utilities_1.variationName('backgroundFit', backgroundFit)], backgroundImage &&
        backgroundPosition &&
        View_css_1.default[css_utilities_1.variationName('backgroundPosition', backgroundPosition)], backgroundImage &&
        View_css_1.default[css_utilities_1.variationName('backgroundRepeat', `${backgroundRepeat}`)], display && View_css_1.default[css_utilities_1.variationName('display', display)], visibility && View_css_1.default[css_utilities_1.variationName('visibility', visibility)], responsiveClassNames &&
        responsiveClassNames.map((className) => View_css_1.default[className]))} style={responsiveStyle} aria-hidden={accessibilityVisibility === 'hidden' ? true : undefined} aria-label={role && accessibilityLabel} id={id}>
      {children}
    </Element>);
}
exports.View = View;