import { selectorFamily } from 'recoil';
import { breakpoints } from '../breakpoints';
import breakpointWidth from '../atoms/breakpointWidth';

/**
 * Read-only selector family for selecting the name of the current breakpoint
 * width.
 */
const breakpointName = selectorFamily({
  key: 'breakpoint.selectors.breakpointName',
  get: key => ({
    get
  }) => {
    const width = get(breakpointWidth(key));
    const matchingBreakpoint = breakpoints.find(b => width >= b.min && width < b.max);
    return matchingBreakpoint && matchingBreakpoint.name;
  }
});
export default breakpointName;