"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useViewportWidth = exports.RenderOnScreen = exports.mediaUp = exports.mediaDown = exports.mediaBetween = void 0;
exports.useDown = useDown;
exports.useUp = useUp;
exports.useBetween = useBetween;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = require("@xstyled/styled-components");
Object.defineProperty(exports, "useViewportWidth", { enumerable: true, get: function () { return styled_components_1.useViewportWidth; } });
const theme_1 = require("./theme");
/** Returns CSS media string with appropriate min-width and max-width values. */
const mediaBetween = (minWidth, maxWidth) => (props) => `@media (min-width: ${theme_1.th.screen(minWidth)(props)}) and (max-width: ${theme_1.th.screen(maxWidth)(props)})`;
exports.mediaBetween = mediaBetween;
/** Returns CSS media string with appropriate max-width value */
const mediaDown = (width) => (props) => {
    return `@media (max-width: ${theme_1.th.screen(width)(props)})`;
};
exports.mediaDown = mediaDown;
/** Returns CSS media string with appropriate min-width value. */
const mediaUp = (width) => (props) => `@media (min-width: ${theme_1.th.screen(width)(props)})`;
exports.mediaUp = mediaUp;
/**
 * Renders its content when viewport width is at or above a provided breakpoint.
 * Optionally, direction can be set to down, or below, the breakpoint.
 */
const RenderOnScreen = ({ children, maxWidth, minWidth }) => {
    if (minWidth && maxWidth) {
        return ((0, jsx_runtime_1.jsx)(RenderBetween, { maxWidth: maxWidth, minWidth: minWidth, children: children }));
    }
    if (minWidth) {
        return (0, jsx_runtime_1.jsx)(RenderOver, { width: minWidth, children: children });
    }
    if (maxWidth) {
        return (0, jsx_runtime_1.jsx)(RenderUnder, { width: maxWidth, children: children });
    }
    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
};
exports.RenderOnScreen = RenderOnScreen;
const RenderBetween = ({ children, maxWidth, minWidth }) => {
    const isBetween = useBetween(minWidth, maxWidth);
    return isBetween ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }) : null;
};
const RenderOver = ({ children, width }) => {
    const isOver = useUp(width);
    return isOver ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }) : null;
};
const RenderUnder = ({ children, width }) => {
    const isUnder = useDown(width);
    return isUnder ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }) : null;
};
/** /!\ No need to export it, keep it internal */
/** Returns viewport width and provided screen width as a number. */
function useMedia(width) {
    const theme = (0, theme_1.useTheme)();
    const viewportWidth = (0, styled_components_1.useViewportWidth)();
    const valueString = theme_1.th.screen(width)({ theme });
    const value = Number(valueString.replace('px', ''));
    return { value, viewportWidth };
}
/** Returns true if current viewport width is smaller than provided width. */
function useDown(width) {
    const { value, viewportWidth } = useMedia(width);
    return viewportWidth !== null && value !== null && viewportWidth < value;
}
/** Returns true if current viewport width is larger than or equal to provided width. */
function useUp(width) {
    const { value, viewportWidth } = useMedia(width);
    return viewportWidth !== null && value !== null && viewportWidth >= value;
}
/** Returns true if current viewport width is between provided min and max widths. */
function useBetween(minWidth, maxWidth) {
    const isDown = useDown(maxWidth);
    const isUp = useUp(minWidth);
    return isDown && isUp;
}
//# sourceMappingURL=media.js.map