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)
}