"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Hidden = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const inlineFormatting_1 = require("../../utilities/inlineFormatting");
const Hidden_css_1 = __importDefault(require("./Hidden.css"));
const VIEWPORT_SIZES = ['small', 'medium', 'large'];
/**
 * Hidden is used to hide content from users based on their viewport size.
 */
function Hidden({ above, below, children }) {
    const inline = inlineFormatting_1.useInlineFormatting();
    const Component = inline ? 'span' : 'div';
    const { hiddenOnSmall, hiddenOnMedium, hiddenOnLarge, } = getResponsiveValuesFromRange(above, below);
    const className = css_utilities_1.classNames(Hidden_css_1.default.Hidden, hiddenOnSmall && Hidden_css_1.default.hiddenOnSmall, hiddenOnMedium && Hidden_css_1.default.hiddenOnMedium, hiddenOnLarge && Hidden_css_1.default.hiddenOnLarge);
    return <Component className={className}>{children}</Component>;
}
exports.Hidden = Hidden;
function getResponsiveValuesFromRange(above, below) {
    if (above === below) {
        return {
            hiddenOnSmall: true,
            hiddenOnMedium: false,
            hiddenOnLarge: true,
        };
    }
    const start = above ? VIEWPORT_SIZES.indexOf(above) + 1 : 0;
    const end = below
        ? VIEWPORT_SIZES.indexOf(below) - 1
        : VIEWPORT_SIZES.length - 1;
    const range = VIEWPORT_SIZES.slice(start, end + 1);
    const hiddenOnSmall = range.indexOf('small') >= 0;
    const hiddenOnMedium = range.indexOf('medium') >= 0;
    const hiddenOnLarge = range.indexOf('large') >= 0;
    return { hiddenOnSmall, hiddenOnMedium, hiddenOnLarge };
}