media.js

import is from '../../plugins/is';

const minWidth = 'min-width';
const maxWidth = 'max-width';

const query = (size, measure) => {
  return `@media (${measure}: ${size}px)`
};

const matchMedia = (val) => {
  return window.matchMedia(`(${val})`).matches
}

const matchOrientation = (orientation) => {
  return matchMedia(`orientation: ${orientation}`)
}

const checkOrRules = (check, rules) => {
  if (rules) {
    return check ? rules : {}
  }
  return check;
}

const media = {
  width: {
    larger: function (size, rules) {
      return {
        [query(size, minWidth)]: rules
      }
    }
  },
  is: {
    tablet: {
      large: function (rules) {
        return checkOrRules(is.tablet(), rules)
      },
      small: function (rules) {
        return checkOrRules(is.tablet(), rules)
      }
    },
    landscape: function (rules) {
      return checkOrRules(matchOrientation('landscape'), rules)
    },
    portrait: function (rules) {
      return checkOrRules(matchOrientation('portrait'), rules)
    }
  }
}

export default media;