/**
 * M3's window size classes, for scripts that ask the viewport width.
 *
 * The same four numbers as the stylesheets' range media queries (`@media (width >= 840px)`) and the
 * layout components' `hide-below`, `hide-from` and `stack-below` props; compact is everything below
 * `medium`. `from('expanded')` and `upTo('medium')` return MediaQueryLists on that same range
 * syntax, so a script and a stylesheet never disagree at the boundary pixel.
 */
export const breakpoints = Object.freeze({
    medium: 600,
    expanded: 840,
    large: 1200,
    'extra-large': 1600,
})

const width = (name) => {
    if (!(name in breakpoints)) {
        throw new Error(`Unknown breakpoint "${name}". Use one of: ${Object.keys(breakpoints).join(', ')}.`)
    }

    return breakpoints[name]
}

/** Matches at and above the class's lower edge, like `medium:`. */
export const from = (name) => window.matchMedia(`(width >= ${width(name)}px)`)

/** Matches below the class's lower edge, like `max-medium:`. */
export const upTo = (name) => window.matchMedia(`(width < ${width(name)}px)`)