import weakMemo from '@emotion/weak-memoize';
import facepaint from 'facepaint';

type BREAKPOINTSTYPE = {
  xs: number;
  sm: number;
  md: number;
  lg: number;
};

export const BREAK_POINTS: BREAKPOINTSTYPE = { xs: 586, sm: 768, md: 992, lg: 1200 };

const minWidth = (width: number, m: boolean = true) =>
  `${m ? '@media ' : ''}(min-width: ${width}px)`;

type MediaType = {
  [P in keyof BREAKPOINTSTYPE]: string;
};

export const media: MediaType = Object.entries(BREAK_POINTS).reduce(
  (obj, [key, value]) => ({ ...obj, [key]: minWidth(value) }),
  {} as Record<keyof MediaType, string>
);

const paint = weakMemo(breakpoints =>
  facepaint(Object.entries(breakpoints).map(([, width]) => `@media (min-width: ${width}px)`))
);

export function useMediaQuery() {
  return paint(BREAK_POINTS);
}