import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
var ResponsiveMap = {
  xs: '(max-width: 575px)',
  sm: '(min-width: 576px)',
  md: '(min-width: 768px)',
  lg: '(min-width: 992px)',
  xl: '(min-width: 1200px)',
  xxl: '(min-width: 1600px)'
};
var mqlListenerMap = {};

function useResponsive() {
  var _React$useState = React.useState(null),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      activeBreakpoint = _React$useState2[0],
      setActiveBreakpoint = _React$useState2[1];

  function initMediaListeners() {
    Object.keys(ResponsiveMap).forEach(function (breakpoint) {
      var mql = window.matchMedia(ResponsiveMap[breakpoint]);

      var listener = function listener(_ref) {
        var matches = _ref.matches;

        if (matches) {
          setActiveBreakpoint(breakpoint);
        }
      };

      listener(mql);

      if (!mql.addListener) {
        mql.addEventListener('change', listener);
      } else {
        mql.addListener(listener);
      }

      mqlListenerMap[breakpoint] = {
        mql: mql,
        listener: listener
      };
    });
  }

  function removeListeners() {
    Object.keys(mqlListenerMap).forEach(function (breakpoint) {
      var _mqlListenerMap$break = mqlListenerMap[breakpoint],
          mql = _mqlListenerMap$break.mql,
          listener = _mqlListenerMap$break.listener;

      if (listener) {
        if (!mql.removeListener) {
          mql.removeEventListener('change', listener);
        } else {
          mql.removeListener(listener);
        }
      }
    });
  }

  React.useEffect(function () {
    initMediaListeners();
    return removeListeners;
  }, []);
  return [activeBreakpoint];
}

export default useResponsive;