import React__default, { useState, useEffect } from 'react';

const DEFAULT_MOBILE = false;
// const DEFAULT_MOBILE = '768px';
const MOBILE_CLASSNAME = 'sendbird--mobile-mode';
const MediaQueryContext = /*#__PURE__*/React__default.createContext({
  breakpoint: DEFAULT_MOBILE,
  isMobile: false
});
const addClassNameToBody = () => {
  try {
    const body = document.querySelector('body');
    body === null || body === void 0 ? void 0 : body.classList.add(MOBILE_CLASSNAME);
  } catch (_unused) {
    // noop
  }
};
const removeClassNameFromBody = () => {
  try {
    const body = document.querySelector('body');
    body === null || body === void 0 ? void 0 : body.classList.remove(MOBILE_CLASSNAME);
  } catch (_unused2) {
    // noop
  }
};
const MediaQueryProvider = props => {
  const {
    children,
    logger
  } = props;
  const breakpoint = (props === null || props === void 0 ? void 0 : props.breakpoint) || false;
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    var _logger$info6;
    const updateSize = () => {
      if (typeof breakpoint === 'boolean') {
        setIsMobile(breakpoint);
        if (breakpoint) {
          var _logger$info;
          logger === null || logger === void 0 ? void 0 : (_logger$info = logger.info) === null || _logger$info === void 0 ? void 0 : _logger$info.call(logger, 'MediaQueryProvider: isMobile: true');
          addClassNameToBody();
        } else {
          var _logger$info2;
          logger === null || logger === void 0 ? void 0 : (_logger$info2 = logger.info) === null || _logger$info2 === void 0 ? void 0 : _logger$info2.call(logger, 'MediaQueryProvider: isMobile: false');
          removeClassNameFromBody();
        }
      } else {
        var _logger$info3;
        const mq = window.matchMedia(`(max-width: ${breakpoint})`);
        logger === null || logger === void 0 ? void 0 : (_logger$info3 = logger.info) === null || _logger$info3 === void 0 ? void 0 : _logger$info3.call(logger, `MediaQueryProvider: Screensize updated to ${breakpoint}`);
        if (mq.matches) {
          var _logger$info4;
          setIsMobile(true);
          addClassNameToBody();
          logger === null || logger === void 0 ? void 0 : (_logger$info4 = logger.info) === null || _logger$info4 === void 0 ? void 0 : _logger$info4.call(logger, 'MediaQueryProvider: isMobile: true');
        } else {
          var _logger$info5;
          setIsMobile(false);
          removeClassNameFromBody();
          logger === null || logger === void 0 ? void 0 : (_logger$info5 = logger.info) === null || _logger$info5 === void 0 ? void 0 : _logger$info5.call(logger, 'MediaQueryProvider: isMobile: false');
        }
      }
    };
    updateSize();
    window.addEventListener('resize', updateSize);
    logger === null || logger === void 0 ? void 0 : (_logger$info6 = logger.info) === null || _logger$info6 === void 0 ? void 0 : _logger$info6.call(logger, 'MediaQueryProvider: addEventListener', {
      updateSize
    });
    return () => {
      var _logger$info7;
      window.removeEventListener('resize', updateSize);
      logger === null || logger === void 0 ? void 0 : (_logger$info7 = logger.info) === null || _logger$info7 === void 0 ? void 0 : _logger$info7.call(logger, 'MediaQueryProvider: removeEventListener', {
        updateSize
      });
    };
  }, [breakpoint]);
  return /*#__PURE__*/React__default.createElement(MediaQueryContext.Provider, {
    value: {
      breakpoint,
      isMobile
    }
  }, children);
};
const useMediaQueryContext = () => React__default.useContext(MediaQueryContext);

export { MediaQueryProvider as M, useMediaQueryContext as u };
//# sourceMappingURL=MediaQueryContext-b531adc9.js.map
