/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { useState, useEffect } from 'react';
export var BreakpointSize;
(function (BreakpointSize) {
    BreakpointSize["XSMALL"] = "xsmall";
    BreakpointSize["SMALL"] = "small";
    BreakpointSize["MEDIUM"] = "medium";
    BreakpointSize["LARGE"] = "large";
    BreakpointSize["XLARGE"] = "xlarge";
    BreakpointSize["XXLARGE"] = "xxlarge";
})(BreakpointSize || (BreakpointSize = {}));
export function useWindowSize() {
    const [windowSize, setWindowSize] = useState({
        width: undefined, // undefined to avoid client/server mismatch on initial mount
        height: undefined, // undefined to avoid client/server mismatch on initial mount,
        isXSmall: undefined, // undefined to avoid client/server mismatch on initial mount,
        isSmall: undefined, // undefined to avoid client/server mismatch on initial mount,
        isMedium: undefined, // undefined to avoid client/server mismatch on initial mount,
        isLarge: undefined, // undefined to avoid client/server mismatch on initial mount,
        isXLarge: undefined, // undefined to avoid client/server mismatch on initial mount,
        isXXLarge: undefined, // undefined to avoid client/server mismatch on initial mount,
        currentBreakpointSize: undefined, // undefined to avoid client/server mismatch on initial mount,
    });
    useEffect(() => {
        // should only execute all the code below on client
        function handleResize() {
            setWindowSize({
                width: window.innerWidth,
                height: window.innerHeight,
                /*
                 * Maps to large breakpoint
                 * TODO: replace with design token. Requires remToPx util.
                 */
                isXSmall: window.innerWidth >= 320,
                isSmall: window.innerWidth >= 544,
                isMedium: window.innerWidth >= 768,
                isLarge: window.innerWidth >= 1012,
                isXLarge: window.innerWidth >= 1280,
                isXXLarge: window.innerWidth >= 1440,
                currentBreakpointSize: breakpointSwitch(window.innerWidth),
            });
        }
        window.addEventListener('resize', handleResize);
        handleResize();
        return () => window.removeEventListener('resize', handleResize);
    }, []);
    return windowSize;
}
const breakpointSwitch = (value) => {
    let current = BreakpointSize.XXLARGE;
    switch (true) {
        case value >= 320 && value < 544:
            current = BreakpointSize.XSMALL;
            break;
        case value >= 544 && value < 768:
            current = BreakpointSize.SMALL;
            break;
        case value >= 768 && value < 1012:
            current = BreakpointSize.MEDIUM;
            break;
        case value >= 1012 && value < 1280:
            current = BreakpointSize.LARGE;
            break;
        case value >= 1280 && value < 1440:
            current = BreakpointSize.XLARGE;
            break;
        default:
            current = BreakpointSize.XXLARGE;
    }
    return current;
};
