import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useViewportWidth } from '@xstyled/styled-components';
import { th, useTheme } from './theme';
/** Returns CSS media string with appropriate min-width and max-width values. */
export const mediaBetween = (minWidth, maxWidth) => (props) => `@media (min-width: ${th.screen(minWidth)(props)}) and (max-width: ${th.screen(maxWidth)(props)})`;
/** Returns CSS media string with appropriate max-width value */
export const mediaDown = (width) => (props) => {
    return `@media (max-width: ${th.screen(width)(props)})`;
};
/** Returns CSS media string with appropriate min-width value. */
export const mediaUp = (width) => (props) => `@media (min-width: ${th.screen(width)(props)})`;
/**
 * Renders its content when viewport width is at or above a provided breakpoint.
 * Optionally, direction can be set to down, or below, the breakpoint.
 */
export const RenderOnScreen = ({ children, maxWidth, minWidth }) => {
    if (minWidth && maxWidth) {
        return (_jsx(RenderBetween, { maxWidth: maxWidth, minWidth: minWidth, children: children }));
    }
    if (minWidth) {
        return _jsx(RenderOver, { width: minWidth, children: children });
    }
    if (maxWidth) {
        return _jsx(RenderUnder, { width: maxWidth, children: children });
    }
    return _jsx(_Fragment, { children: children });
};
const RenderBetween = ({ children, maxWidth, minWidth }) => {
    const isBetween = useBetween(minWidth, maxWidth);
    return isBetween ? _jsx(_Fragment, { children: children }) : null;
};
const RenderOver = ({ children, width }) => {
    const isOver = useUp(width);
    return isOver ? _jsx(_Fragment, { children: children }) : null;
};
const RenderUnder = ({ children, width }) => {
    const isUnder = useDown(width);
    return isUnder ? _jsx(_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 = useTheme();
    const viewportWidth = useViewportWidth();
    const valueString = th.screen(width)({ theme });
    const value = Number(valueString.replace('px', ''));
    return { value, viewportWidth };
}
/** Returns true if current viewport width is smaller than provided width. */
export 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. */
export 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. */
export function useBetween(minWidth, maxWidth) {
    const isDown = useDown(maxWidth);
    const isUp = useUp(minWidth);
    return isDown && isUp;
}
/** Return the width of the viewport. */
export { useViewportWidth };
//# sourceMappingURL=media.js.map