import _extends from "@babel/runtime/helpers/extends";
// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
import classNames from 'classnames';
import React, { useEffect, useState, useRef } from 'react';
import { CLS_PREFIX } from '../../constants';
import Popover from '../Popover';
import Text from '../Text';
import Translate from '../Translate';
import Focuser from '../Overlay/Focuser';
import { safeInvoke } from '../utils';

const SpotPopup = ({
  baseClassName = "".concat(CLS_PREFIX, "spot-popup"),
  className,
  pulsar,
  pulsarRef,
  title,
  placement,
  image,
  children,
  buttons,
  meta,
  onClose,
  size,
  locale,
  ...props
}) => {
  const footerRef = useRef(null); // rerendering is necessary to fix a popover arrow

  const [, setReady] = useState(false);
  useEffect(() => {
    setReady(true);

    if (footerRef.current) {
      setTimeout(() => {
        new Focuser().focusLastDescendant(footerRef.current);
      });
    }
  }, []);

  if (typeof image === 'string') {
    image = /*#__PURE__*/React.createElement("img", {
      src: image,
      alt: ""
    });
  }

  return /*#__PURE__*/React.createElement(Popover, _extends({
    className: classNames(baseClassName, className, {
      ["".concat(baseClassName, "--").concat(size)]: size
    }),
    title: title,
    target: pulsar,
    targetRef: pulsarRef,
    placement: placement,
    visible: true,
    onClose: () => safeInvoke(onClose),
    canCloseOnOutsideClick: false,
    autoFocus: false
  }, props), image && /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(baseClassName, "__media"), {
      ["".concat(baseClassName, "__media--compact")]: !title
    })
  }, image), children, buttons && /*#__PURE__*/React.createElement("div", {
    className: "".concat(baseClassName, "__footer"),
    ref: footerRef
  }, meta && meta.total > 1 ? /*#__PURE__*/React.createElement(Text, {
    intent: "muted",
    fontSize: "sm"
  }, /*#__PURE__*/React.createElement(Translate, {
    namespace: "SpotPopup",
    content: "total",
    params: {
      current: meta.current + 1,
      total: meta.total
    },
    translators: locale,
    fallback: "%%current%% of %%total%%"
  })) : /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("div", {
    className: "".concat(baseClassName, "__actions")
  }, buttons)));
};

export default SpotPopup;