import React__default, { useState, useEffect } from 'react';
import { fullScreenHelper } from '@zenview/micro-utils';
import IconFont from '../IconFont/index.js';
import '../_rollupPluginBabelHelpers-736b301a.js';

function FullScreen({
  children,
  className,
  getContainer,
  fullScreenChange
}) {
  const [screenState, setScreenState] = useState(false);
  useEffect(() => {
    const onfullscreenchange = () => {
      const fullScreenEle = fullScreenHelper.isFullscreen();
      const container = getContainer();
      const flag = container === fullScreenEle;
      setScreenState(flag);
      fullScreenChange && fullScreenChange(flag);
    };
    document.addEventListener('webkitfullscreenchange', onfullscreenchange, false);
    return () => document.removeEventListener('webkitfullscreenchange', onfullscreenchange, false);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [screenState]);
  function onClickFullScreen() {
    const container = getContainer();
    const fullScreenEle = fullScreenHelper.isFullscreen();
    const flag = fullScreenEle === container;
    flag ? fullScreenHelper.exitFullscreen() : fullScreenHelper.fullscreen(container);
    setScreenState(!flag);
    fullScreenChange && fullScreenChange(!flag);
  }
  return /*#__PURE__*/React__default.createElement("div", {
    className: `tools-screen-layer ${className ? className : ''}`,
    onClick: () => onClickFullScreen()
  }, children ? children(screenState) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconFont, {
    className: "defualt-fullscreen-icon icon-primary",
    type: !screenState ? 'icon-S_View_ScreenViewFull' : 'icon-S_View_ScreenViewExit',
    theme: "outlined"
  }), !screenState ? '全屏' : '窗口'));
}
var FullScreen$1 = /*#__PURE__*/React__default.memo(FullScreen);

export { FullScreen$1 as default };
//# sourceMappingURL=index.js.map
