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

var css_248z = ".useLoader_loadingWrapper__1yt9l {\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  z-index: 100; }\n  .useLoader_loadingWrapper__1yt9l > div {\n    transition: 0.5s ease-out;\n    transform: translateY(30px);\n    opacity: 0; }\n  .useLoader_loadingWrapper__1yt9l.useLoader_active__o65oe {\n    opacity: 1; }\n    .useLoader_loadingWrapper__1yt9l.useLoader_active__o65oe > div {\n      transform: translateY(0px);\n      opacity: 1; }\n";
var styles = {"loadingWrapper":"useLoader_loadingWrapper__1yt9l","active":"useLoader_active__o65oe"};
styleInject(css_248z);

/**
 * useLoader React Hook
 * Helper hook to add a loader to your component
 * By default it covers the entire component (w100% h100%)
 * @param {bool} isLoading initial value of the loader
 * @returns {obj} {
 *    @param renderLoader {func} Place this inside your component
 *    @param activateLoader {func}  To activate the loader
 *    @param deactivateLoader {func}  To deactivate the loader
 * }
 */
function useLoader(isLoading) {
  var _useState = useState(isLoading),
    _useState2 = _slicedToArray(_useState, 2),
    active = _useState2[0],
    setActive = _useState2[1];
  var _useActivify = useActivify(active),
    visible = _useActivify.visible,
    enabled = _useActivify.enabled;
  var activateLoader = useCallback(function () {
    setActive(true);
  }, []);
  var deactivateLoader = useCallback(function () {
    setActive(false);
  }, []);
  var renderLoader = React.useCallback(function () {
    var activeClassName = visible ? styles.active : "yolo";
    if (!enabled) return null;
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(styles.loadingWrapper, " ").concat(activeClassName)
    }, /*#__PURE__*/React.createElement(LoadingComponent, null));
  }, [visible, enabled]);
  useEffect(function () {
    if (isLoading) activateLoader();else deactivateLoader();
  }, [isLoading, activateLoader, deactivateLoader]);
  return {
    renderLoader: renderLoader,
    activateLoader: activateLoader,
    deactivateLoader: deactivateLoader
  };
}

export default useLoader;
