import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import cx from 'classnames';
import throttle from 'lodash.throttle';
import Overlay from '../overlay';
import Transition from 'react-transition-group/Transition';
import { useResizeDetector } from 'react-resize-detector';
import { events } from '../utils';
import { calculatePositions } from './positionCalculation';
import { getMaxHeight } from './sizeCalculation';
import Box from '../box';
import theme from './theme.css';
import uiUtilities from '@teamleader/ui-utilities';
import useFocusTrap from '../../utils/useFocusTrap';

var Popover = function Popover(props) {
  var _useState = useState({
    left: 0,
    top: 0
  }),
      _useState2 = _slicedToArray(_useState, 2),
      positioning = _useState2[0],
      setPositioning = _useState2[1];

  var _props$active = props.active,
      active = _props$active === void 0 ? true : _props$active,
      _props$backdrop = props.backdrop,
      backdrop = _props$backdrop === void 0 ? 'dark' : _props$backdrop,
      children = props.children,
      className = props.className,
      _props$color = props.color,
      color = _props$color === void 0 ? 'neutral' : _props$color,
      _props$fullHeight = props.fullHeight,
      fullHeight = _props$fullHeight === void 0 ? true : _props$fullHeight,
      _props$fullWidth = props.fullWidth,
      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
      _props$lockScroll = props.lockScroll,
      lockScroll = _props$lockScroll === void 0 ? true : _props$lockScroll,
      _props$maxWidth = props.maxWidth,
      maxWidth = _props$maxWidth === void 0 ? '50vw' : _props$maxWidth,
      _props$minWidth = props.minWidth,
      minWidth = _props$minWidth === void 0 ? '180px' : _props$minWidth,
      onOverlayClick = props.onOverlayClick,
      onEscKeyDown = props.onEscKeyDown,
      _props$tint = props.tint,
      tint = _props$tint === void 0 ? 'lightest' : _props$tint,
      _props$zIndex = props.zIndex,
      zIndex = _props$zIndex === void 0 ? 300 : _props$zIndex,
      anchorEl = props.anchorEl,
      _props$direction = props.direction,
      direction = _props$direction === void 0 ? 'south' : _props$direction,
      _props$position = props.position,
      position = _props$position === void 0 ? 'center' : _props$position,
      _props$offsetCorrecti = props.offsetCorrection,
      offsetCorrection = _props$offsetCorrecti === void 0 ? 0 : _props$offsetCorrecti,
      _props$returnFocusToS = props.returnFocusToSource,
      returnFocusToSource = _props$returnFocusToS === void 0 ? true : _props$returnFocusToS;

  var _useFocusTrap = useFocusTrap({
    active: active,
    returnFocusToSource: returnFocusToSource,
    initialFocusRef: undefined
  }),
      ref = _useFocusTrap.ref,
      FocusRing = _useFocusTrap.FocusRing;

  var handleResize = function handleResize() {
    if (ref.current && anchorEl) {
      setPositioning(calculatePositions(anchorEl, ref.current, direction, position, offsetCorrection));
    }
  };

  useResizeDetector({
    handleHeight: true,
    handleWidth: true,
    onResize: handleResize,
    refreshMode: 'throttle',
    refreshRate: 250
  });
  useEffect(function () {
    var handleResizeThrottled = throttle(handleResize, 250);
    events.addEventsToWindow({
      resize: handleResizeThrottled,
      scroll: handleResizeThrottled
    });
    return function cleanup() {
      events.removeEventsFromWindow({
        resize: handleResizeThrottled,
        scroll: handleResizeThrottled
      });
    };
  }, [handleResize]);
  useEffect(function () {
    if (active) {
      handleResize();
    }
  }, [props]);
  var left = positioning.left,
      top = positioning.top,
      maxHeight = positioning.maxHeight;

  if (!active) {
    return null;
  }

  var popover = /*#__PURE__*/React.createElement(Transition, {
    timeout: 0,
    in: active,
    appear: true
  }, function (state) {
    var _cx;

    return /*#__PURE__*/React.createElement("div", {
      className: cx(theme['wrapper'], theme[color], theme[tint], (_cx = {}, _defineProperty(_cx, theme['is-entering'], state === 'entering'), _defineProperty(_cx, theme['is-entered'], state === 'entered'), _cx)),
      style: {
        zIndex: zIndex
      }
    }, /*#__PURE__*/React.createElement(Overlay, {
      active: active,
      backdrop: backdrop,
      className: theme['overlay'],
      lockScroll: lockScroll,
      onOverlayClick: onOverlayClick,
      onEscKeyDown: onEscKeyDown
    }, /*#__PURE__*/React.createElement(FocusRing, null, /*#__PURE__*/React.createElement(Box, {
      "data-teamleader-ui": "popover",
      className: cx(uiUtilities['box-shadow-200'], theme['popover'], className),
      style: {
        left: "".concat(left, "px"),
        top: "".concat(top, "px"),
        maxWidth: fullWidth ? '100vw' : maxWidth,
        minWidth: minWidth
      },
      ref: ref
    }, /*#__PURE__*/React.createElement(Box, {
      className: theme['inner'],
      display: "flex",
      flex: "1 1 auto",
      flexDirection: "column",
      style: {
        maxHeight: maxHeight && getMaxHeight(fullHeight, maxHeight)
      }
    }, children)))));
  });
  return /*#__PURE__*/createPortal(popover, document.body);
};

export default Popover;