import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { getUA, isMobile } from "react-device-detect";
import * as Types from "./types";
const defaultProps = {
    small: 768,
    large: 1024,
};
const Context = React.createContext({
    device: Types.Device.Desktop,
    screen: Types.Screen.Large,
    userAgent: "generic",
    ...defaultProps,
});
export const DeviceConsumer = Context.Consumer;
export const useDevice = () => React.useContext(Context);
export const DeviceProvider = (props) => {
    const { children, small, large } = { ...defaultProps, ...props };
    const [width, setWidth] = React.useState(props.isMobile
        ? 425
        : typeof window !== "undefined"
            ? window.innerWidth
            : 1024);
    React.useEffect(() => {
        if (!window?.innerWidth)
            return;
        setWidth(window.innerWidth);
    }, []);
    const screen = React.useMemo(() => {
        let result = Types.Screen.Large;
        if (width < small) {
            result = Types.Screen.Small;
        }
        else if (width < large) {
            result = Types.Screen.Medium;
        }
        return result;
    }, [width, small, large]);
    const update = React.useCallback(() => {
        setWidth(window.innerWidth);
    }, []);
    React.useEffect(() => {
        window.addEventListener("resize", update);
        return () => {
            window.removeEventListener("resize", update);
        };
    }, []);
    return (_jsx(Context.Provider, { value: {
            device: isMobile ? Types.Device.Mobile : Types.Device.Desktop,
            screen,
            userAgent: getUA,
            small,
            large,
        }, children: children }));
};
//# sourceMappingURL=context.js.map