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

import { isValidElement, cloneElement, useEffect, useState } from 'react';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import Overlay from '../Overlay';
import { useClosingConfirmation } from '../ClosingConfirmation';
import Form from '../Form';
import Button from '../Button';
import Heading from '../Heading';
import Text from '../Text';
import Translate, { isLikeText } from '../Translate';
import { safeInvoke } from '../utils';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const isProps = value => value && typeof value === 'object' && ! /*#__PURE__*/isValidElement(value);

/**
 * `Dialog` is a modal window that asks users to make a decision or enter additional information.
 * @since 0.0.68
 */
const Dialog = _ref => {
  let {
    baseClassName,
    className,
    children,
    actions,
    isOpen,
    banner,
    image,
    title,
    subtitle,
    cancelTitle,
    cancelButton,
    buttons,
    form,
    size,
    closable,
    onClose,
    closingConfirmation,
    canClose,
    ...props
  } = _ref;
  const [isVisible, setIsVisible] = useState(isOpen);
  const {
    onCloseWithConfirmation,
    closingConfirmationDialog
  } = useClosingConfirmation({
    onClose: () => {
      setIsVisible(false);
      safeInvoke(onClose);
    },
    closingConfirmation
  });
  useEffect(() => {
    setIsVisible(isOpen);
  }, [isOpen]);
  const renderImage = (image, block) => {
    const classPrefix = `${baseClassName}__${block}`;
    if ( /*#__PURE__*/isValidElement(image)) {
      return /*#__PURE__*/_jsx("div", {
        className: classPrefix,
        children: image
      });
    }
    if (typeof image === 'string') {
      return /*#__PURE__*/_jsx("div", {
        className: classPrefix,
        children: /*#__PURE__*/_jsx("img", {
          alt: "",
          className: `${classPrefix}-inner`,
          src: image
        })
      });
    }
    return /*#__PURE__*/_jsx("div", {
      className: classPrefix,
      children: /*#__PURE__*/_jsx("img", {
        alt: "",
        className: `${classPrefix}-inner`,
        ...image
      })
    });
  };
  const getCancelButtonProps = function () {
    let formProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : form;
    if (!closable) {
      return false;
    }
    if (cancelButton === false || formProps && formProps.cancelButton === false) {
      return false;
    }
    let props = {
      onClick: onCloseWithConfirmation,
      children: cancelTitle || /*#__PURE__*/_jsx(Translate, {
        content: "Dialog.cancelButton",
        fallback: "Cancel"
      })
    };
    if (formProps && isProps(formProps.cancelButton)) {
      props = {
        ...props,
        ...formProps.cancelButton
      };
    }
    if (isProps(cancelButton)) {
      props = {
        ...props,
        ...cancelButton
      };
    }
    return props;
  };
  const renderButtons = () => {
    if (form) {
      return null;
    }
    let cancel;
    const cancelButtonProps = getCancelButtonProps();
    if (cancelButtonProps) {
      cancel = /*#__PURE__*/_jsx(Button, {
        ...cancelButtonProps
      });
    }
    if (buttons || cancel) {
      return /*#__PURE__*/_jsxs("div", {
        className: `${baseClassName}__buttons`,
        children: [buttons, cancel]
      });
    }
    return null;
  };
  let childrenElement;
  if (form) {
    if ( /*#__PURE__*/isValidElement(form)) {
      childrenElement = /*#__PURE__*/cloneElement(form, {
        cancelButton: getCancelButtonProps(form.props),
        footerClassName: classNames(form.props.footerClassName, `${baseClassName}__form-footer`)
      });
    } else if (typeof form === 'object') {
      form.cancelButton = getCancelButtonProps();
      form.footerClassName = classNames(form.footerClassName, `${baseClassName}__form-footer`);
      form.applyButton = form.applyButton || false;
      childrenElement = /*#__PURE__*/_jsx(Form, {
        ...form,
        children: children
      });
    }
  } else {
    childrenElement = children;
  }
  return /*#__PURE__*/_jsxs(Overlay, {
    className: classNames(baseClassName, className),
    isOpen: isVisible,
    onClose: onCloseWithConfirmation,
    canCloseOnBackdropClick: canClose && closable,
    canCloseOnEscapePress: canClose && closable,
    size: size,
    ...props,
    children: [(title || subtitle || actions) && /*#__PURE__*/_jsxs("header", {
      className: `${baseClassName}__header`,
      children: [banner && renderImage(banner, 'banner'), /*#__PURE__*/_jsx("div", {
        className: `${baseClassName}__header-inner`,
        children: /*#__PURE__*/_jsxs("div", {
          className: `${baseClassName}__header-body`,
          children: [/*#__PURE__*/_jsxs("div", {
            className: `${baseClassName}__header-content`,
            children: [isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
              level: 2,
              className: `${baseClassName}__title`,
              children: title
            }) : /*#__PURE__*/_jsx("div", {
              className: `${baseClassName}__title`,
              children: title
            }), subtitle && /*#__PURE__*/_jsx("div", {
              className: `${baseClassName}__subtitle`,
              children: isLikeText(subtitle) ? /*#__PURE__*/_jsx(Text, {
                intent: "muted",
                children: subtitle
              }) : subtitle
            })]
          }), (actions || closable) && /*#__PURE__*/_jsxs("div", {
            className: `${baseClassName}__header-actions`,
            children: [actions, closable && /*#__PURE__*/_jsx(Button, {
              className: `${baseClassName}__header-close`,
              disabled: !canClose,
              ghost: true,
              size: "lg",
              icon: "cross-mark",
              onClick: onCloseWithConfirmation
            })]
          })]
        })
      })]
    }), /*#__PURE__*/_jsxs("div", {
      className: `${baseClassName}__content`,
      children: [image && renderImage(image, 'image'), childrenElement, renderButtons()]
    }), closingConfirmationDialog]
  });
};
Dialog.defaultProps = {
  isOpen: false,
  banner: undefined,
  sideBanner: undefined,
  sideBannerContainer: undefined,
  image: undefined,
  title: undefined,
  subtitle: undefined,
  cancelTitle: undefined,
  cancelButton: undefined,
  buttons: undefined,
  actions: undefined,
  form: undefined,
  size: 'md',
  closable: true,
  canClose: true,
  onClose: undefined,
  closingConfirmation: undefined,
  children: undefined,
  className: undefined,
  baseClassName: `${CLS_PREFIX}dialog`
};
export default Dialog;