import React, { useState, useCallback } from 'react';
import { c as _slicedToArray, e as _extends, a as _objectSpread2 } from '../_rollupPluginBabelHelpers-b9ad31fa.js';
import 'prop-types';
import 'styled-components';
import '../hooks/useActivify.js';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import '../index-155df85b.js';
import LoadingComponent from '../ui/loader.js';
import Activify from './activify.js';

var css_248z = ".Loader_loaderWrapper__uY_pG {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  max-height: 100vh;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0.8);\n  transition: 0.5s ease-out;\n  opacity: 0; }\n  .Loader_loaderWrapper__uY_pG > div {\n    transition: 0.5s ease-out;\n    transform: translateY(30px);\n    opacity: 0; }\n  .Loader_loaderWrapper__uY_pG.Loader_active__hYIP2 {\n    opacity: 1; }\n    .Loader_loaderWrapper__uY_pG.Loader_active__hYIP2 > div {\n      transform: translateY(0px);\n      opacity: 1; }\n";
var styles = {"loaderWrapper":"Loader_loaderWrapper__uY_pG","active":"Loader_active__hYIP2"};
styleInject(css_248z);

var Loading = Activify()(function (_ref) {
  var active = _ref.active,
    _ref$zIndex = _ref.zIndex,
    zIndex = _ref$zIndex === void 0 ? 1000000000 : _ref$zIndex,
    _ref$customStyles = _ref.customStyles,
    customStyles = _ref$customStyles === void 0 ? {} : _ref$customStyles;
  var activeClassName = active ? styles.active : "";
  return /*#__PURE__*/React.createElement("div", {
    style: _objectSpread2({
      zIndex: zIndex
    }, customStyles),
    className: "".concat(styles.loaderWrapper, " ").concat(activeClassName)
  }, /*#__PURE__*/React.createElement(LoadingComponent, null));
});
var Loader = function Loader(_ref2) {
  var customStyles = _ref2.customStyles,
    zIndex = _ref2.zIndex;
  return function (WrappedComponent) {
    return function (props) {
      var _useState = useState(false),
        _useState2 = _slicedToArray(_useState, 2),
        active = _useState2[0],
        setActive = _useState2[1];
      var activateLoader = useCallback(function () {
        setActive(true);
      }, []);
      var deactivateLoader = useCallback(function (e) {
        if (e) {
          e.preventDefault && e.preventDefault();
          e.stopPropagation && e.stopPropagation();
        }
        setActive(false);
      }, []);

      // TODO: Inconsitent terminology, We are not actually wrapping a component.
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WrappedComponent
      // eslint-disable-next-line react/jsx-props-no-spreading
      , _extends({}, props, {
        loaderActive: active,
        activateLoader: activateLoader,
        deactivateLoader: deactivateLoader
      })), /*#__PURE__*/React.createElement(Loading, {
        active: active,
        zIndex: zIndex,
        customStyles: customStyles
      }));
    };
  };
};

export default Loader;
