// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

import classNames from 'classnames';
import { 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';

// TODO: Use SpotSpotProps['popup'] instead of copypaste
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const SpotPopup = _ref => {
  let {
    baseClassName = `${CLS_PREFIX}spot-popup`,
    className,
    pulsar,
    pulsarRef,
    title,
    placement,
    image,
    children,
    buttons,
    meta,
    onClose,
    size,
    locale,
    ...props
  } = _ref;
  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__*/_jsx("img", {
      src: image,
      alt: ""
    });
  }
  return /*#__PURE__*/_jsxs(Popover, {
    className: classNames(baseClassName, className, {
      [`${baseClassName}--${size}`]: size
    }),
    title: title,
    target: pulsar,
    targetRef: pulsarRef,
    placement: placement,
    visible: true,
    onClose: () => safeInvoke(onClose),
    canCloseOnOutsideClick: false,
    autoFocus: false,
    ...props,
    children: [image && /*#__PURE__*/_jsx("div", {
      className: classNames(`${baseClassName}__media`, {
        [`${baseClassName}__media--compact`]: !title
      }),
      children: image
    }), children, buttons && /*#__PURE__*/_jsxs("div", {
      className: `${baseClassName}__footer`,
      ref: footerRef,
      children: [meta && meta.total > 1 ? /*#__PURE__*/_jsx(Text, {
        intent: "muted",
        fontSize: "sm",
        children: /*#__PURE__*/_jsx(Translate, {
          namespace: "SpotPopup",
          content: "total",
          params: {
            current: meta.current + 1,
            total: meta.total
          },
          translators: locale,
          fallback: "%%current%% of %%total%%"
        })
      }) : /*#__PURE__*/_jsx("span", {}), /*#__PURE__*/_jsx("div", {
        className: `${baseClassName}__actions`,
        children: buttons
      })]
    })]
  });
};
export default SpotPopup;