import { useState, useRef, useEffect } from 'react';
import { c as _slicedToArray } from '../_rollupPluginBabelHelpers-539c1155.js';

/**
 * useActivify React Hook
 * Enables/Disables elements with timeouts to allow animations to
 * take place
 * @param {bool} active whether to enable to disable the element
 * @returns {obj} {
 *    @param visible {bool}  whether the element should be showed (animated in/out)
 *    @param enabled {bool}  whether the element should render (return null if false)
 * }
 */

function useActivify(active) {
  var _useState = useState(active),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var _useState3 = useState(active),
      _useState4 = _slicedToArray(_useState3, 2),
      enabled = _useState4[0],
      setEnabled = _useState4[1];

  var _enableTimeout = useRef(null);

  var _disableTimeout = useRef(null);

  var show = function show() {
    if (_disableTimeout.current) clearTimeout(_disableTimeout.current);
    setEnabled(true);
    _enableTimeout.current = setTimeout(function () {
      setVisible(true);
    }, 50);
  };

  var hide = function hide() {
    if (_enableTimeout.current) clearTimeout(_enableTimeout.current);
    setVisible(false);
    _disableTimeout.current = setTimeout(function () {
      setEnabled(false);
    }, 400);
  };

  useEffect(function () {
    if (active) show();else hide();
  }, [active]);
  return {
    visible: visible,
    enabled: enabled
  };
}

export default useActivify;
