import { useState, useRef, useCallback, useEffect } from 'react';
import bindElementResize, { unbind as unbindElementResize } from 'element-resize-event';
import helper from '../DOMHelper';
export var useBodyStyles = function useBodyStyles(ref, options) {
  var _useState = useState({}),
      bodyStyles = _useState[0],
      setBodyStyles = _useState[1];

  var overflow = options.overflow,
      drawer = options.drawer,
      prefix = options.prefix;
  var windowResizeListener = useRef();
  var contentElement = useRef();
  var updateBodyStyles = useCallback(function (_event, entering) {
    var dialog = ref.current;
    var scrollHeight = dialog ? dialog.scrollHeight : 0;
    var styles = {
      overflow: 'auto'
    };

    if (dialog) {
      // default margin
      var headerHeight = 46;
      var footerHeight = 46;
      var contentHeight = 30;
      var headerDOM = dialog.querySelector("." + prefix('header'));
      var footerDOM = dialog.querySelector("." + prefix('footer'));
      var contentDOM = dialog.querySelector("." + prefix('content'));
      headerHeight = headerDOM ? helper.getHeight(headerDOM) + headerHeight : headerHeight;
      footerHeight = footerDOM ? helper.getHeight(footerDOM) + footerHeight : footerHeight;
      contentHeight = contentDOM ? helper.getHeight(contentDOM) + contentHeight : contentHeight;

      if (drawer) {
        styles.height = contentHeight - (headerHeight + footerHeight);
      } else {
        /**
         * Header height + Footer height + Dialog margin
         */
        var excludeHeight = headerHeight + footerHeight + (entering ? 70 : 60);
        var bodyHeight = helper.getHeight(window) - excludeHeight;
        var maxHeight = scrollHeight >= bodyHeight ? bodyHeight : scrollHeight;
        styles.maxHeight = maxHeight;
      }
    }

    setBodyStyles(styles);
  }, [drawer, prefix, ref]);
  var onDestroyEvents = useCallback(function () {
    var _windowResizeListener, _windowResizeListener2;

    (_windowResizeListener = windowResizeListener.current) === null || _windowResizeListener === void 0 ? void 0 : (_windowResizeListener2 = _windowResizeListener.off) === null || _windowResizeListener2 === void 0 ? void 0 : _windowResizeListener2.call(_windowResizeListener);

    if (contentElement.current) {
      unbindElementResize(contentElement.current);
    }
  }, []);
  var onChangeBodyStyles = useCallback(function (entering) {
    if (overflow) {
      var _ref$current;

      updateBodyStyles(null, entering);
      contentElement.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("." + prefix('content'));
      windowResizeListener.current = helper.on(window, 'resize', updateBodyStyles);
      bindElementResize(contentElement.current, updateBodyStyles);
    }
  }, [overflow, prefix, ref, updateBodyStyles]);
  useEffect(function () {
    onDestroyEvents();
  }, [onDestroyEvents]);
  return [overflow ? bodyStyles : {}, onChangeBodyStyles, onDestroyEvents];
};