import { css } from 'styled-components';
import { grid_conf } from '@/styles/variables';

const BASE_CONF = grid_conf

const configCache = []
const makeCacheId = props => JSON.stringify({})
const resolveConfig = props => {
  const conf = {
    ...BASE_CONF,
    container: {
      ...BASE_CONF.container,
    },
    breakpoints: {
      ...BASE_CONF.breakpoints,
    }
  }

  conf.media = Object.keys(conf.breakpoints).reduce((media, breakpoint) => {
    const breakpointWidth = conf.breakpoints[breakpoint]
    media[breakpoint] = makeMedia(
      [conf.mediaQuery, breakpoint !== 0 && `(min-width: ${breakpointWidth})`]
        .filter(Boolean)
        .join(' and ')
    )
    return media
  }, {})

  conf.mediaContainer = Object.keys(conf.container).reduce((media, container) => {
    const containerWidth = conf.container[container]
    media[container] = makeMedia(
      [conf.mediaQuery, container !== 0 && `(min-width: ${containerWidth})`]
        .filter(Boolean)
        .join(' and ')
    )
    return media
  }, {})

  return conf
}

export const DIMENSION_NAMES = Object.keys(BASE_CONF.breakpoints)
export const CONTAINER_NAMES = Object.keys(BASE_CONF.container)

export default function config(props) {
  const cacheId = makeCacheId(props)
  if (configCache[0] === cacheId) {
    return configCache[1]
  }

  const conf = resolveConfig(props)

  configCache[0] = cacheId
  configCache[1] = conf

  return conf
}

export function makeMedia(media) {
  return (...args) => css`
    @media ${media} {
      ${css(...args)}
    }
  `
}