import screenfull from 'screenfull';

/**
 * 申请全屏
 * @see https://www.npmjs.com/package/screenfull#screenfull-1
 */
export const requestScreenFull = () => {
  if (screenfull.isEnabled) {
    screenfull.request();
  }
};

/**
 * 将一个DOM元素全屏
 * @param {DOMElement} element
 */
export const requestElementScreenFull = (element) => {
  if (screenfull.isEnabled) {
    screenfull.request(element);
  }
};

/**
 * 全屏切换方法
 */
export const toggleScreenFull = () => {
  if (screenfull.isEnabled) {
    screenfull.toggle();
  }
};

/**
 * 监听全屏事件
 * @param {function} fn - 事件发生时的回调函数
 * @returns
 */
export const onScreenFullChange = (fn) => {
  if (screenfull.isEnabled) {
    screenfull.on('change', () => {
      if (typeof fn === 'function') {
        fn(screenfull.isFullscreen);
      }
    });
  }

  return () => {
    screenfull.off('change', fn);
  };
};
