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 PropTypes from 'prop-types';
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';
/** @type {React.ComponentType<any>} */

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

  var active = props.active,
      backdrop = props.backdrop,
      children = props.children,
      className = props.className,
      color = props.color,
      fullHeight = props.fullHeight,
      fullWidth = props.fullWidth,
      lockScroll = props.lockScroll,
      maxWidth = props.maxWidth,
      minWidth = props.minWidth,
      onOverlayClick = props.onOverlayClick,
      onEscKeyDown = props.onEscKeyDown,
      tint = props.tint,
      zIndex = props.zIndex,
      anchorEl = props.anchorEl,
      direction = props.direction,
      position = props.position,
      offsetCorrection = props.offsetCorrection,
      returnFocusToSource = props.returnFocusToSource;

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

  var handleResize = function handleResize() {
    if (ref.current) {
      setState({
        positioning: 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 _state$positioning = state.positioning,
      left = _state$positioning.left,
      top = _state$positioning.top,
      maxHeight = _state$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("div", {
      "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: getMaxHeight(fullHeight, maxHeight)
      }
    }, children)))));
  });
  return /*#__PURE__*/createPortal(popover, document.body);
};

Popover.defaultProps = {
  active: true,
  backdrop: 'dark',
  zIndex: 300,
  direction: 'south',
  fullHeight: true,
  fullWidth: false,
  color: 'neutral',
  lockScroll: true,
  maxWidth: '50vw',
  minWidth: '180px',
  offsetCorrection: 0,
  position: 'center',
  tint: 'lightest',
  returnFocusToSource: true
};
export default Popover;