import * as React from 'react';
import { BREAKPOINTS } from "../../constants.js";
import { Device } from "../../models/index.js";
import { isDeviceValue } from "../../utils/index.js";
import { useWindowWidth } from "../context/windowWidthContext/index.js";
const getDeviceBreakpoints = (inclusive) => {
    const shift = inclusive ? 0 : -1;
    return [BREAKPOINTS.md + shift, BREAKPOINTS.sm + shift];
};
export function useDeviceValue(value, inclusive) {
    const windowWidth = useWindowWidth();
    const [tablet, mobile] = React.useMemo(() => getDeviceBreakpoints(inclusive), [inclusive]);
    const isMobile = windowWidth <= mobile;
    const isTablet = windowWidth <= tablet;
    return React.useMemo(() => {
        if (!isDeviceValue(value)) {
            return value;
        }
        switch (true) {
            case isMobile:
                return value[Device.Mobile];
            case isTablet:
                return value[Device.Tablet] ?? value[Device.Mobile];
            default:
                return value[Device.Desktop];
        }
    }, [isMobile, isTablet, value]);
}
//# sourceMappingURL=useDeviceValue.js.map
