import React from 'react';
import 'react-dom';
import { c as _slicedToArray, e as _extends } from '../_rollupPluginBabelHelpers-b9ad31fa.js';
import 'prop-types';
import 'styled-components';
import '../key_codes-ff72266d.js';
import '../hooks/useActivify.js';
import '../index-6829ab1f.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { I as Icon, C as CloseIcon } from '../index-fc484d02.js';
import '../overlays/withTooltip.js';
import '../index-155df85b.js';
import '../ui/text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import '../ui/box.js';
import '../generic-7099c3ed.js';
import '../ui/button.js';
import '../useEnterKey-cb5bf7c9.js';
import '../ThemedModal-adf27152.js';
import Modal from '../overlays/modal.js';
import Dialog from '../overlays/dialog.js';

var css_248z = ".ConfirmationDialog_dialogHeader__3RZod {\n  padding: 16px;\n  border-bottom: 1px solid #ccc;\n  display: flex;\n  align-items: center;\n  justify-content: space-between; }\n\n.ConfirmationDialog_dialogHeaderText__Ov_Lq {\n  margin: 0;\n  font-size: 22px; }\n\n.ConfirmationDialog_dialogHeaderCloseIcon__1JYOP {\n  cursor: pointer;\n  opacity: 0.7;\n  transition: 0.2 ease-out; }\n  .ConfirmationDialog_dialogHeaderCloseIcon__1JYOP:hover {\n    opacity: 1; }\n\n.ConfirmationDialog_dialogBody__3b_cs {\n  padding: 16px;\n  max-height: 300px;\n  overflow-y: auto; }\n\n.ConfirmationDialog_dialogText__1gkMH {\n  margin-bottom: 32px;\n  margin-top: 0;\n  font-size: 16px;\n  font-weight: 400;\n  opacity: 0.8; }\n\n.ConfirmationDialog_dialogButtons__1wyha {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  margin-right: -16px; }\n\n.ConfirmationDialog_dialogButton__1YvmK {\n  outline: none;\n  padding: 6px 18px;\n  border: 2px solid #124fa0;\n  background-color: #124fa0;\n  color: #fff;\n  font-size: 16px;\n  border-radius: 4px;\n  margin-right: 16px;\n  transition: 0.2s ease-out;\n  cursor: pointer; }\n  .ConfirmationDialog_dialogButton__1YvmK:hover {\n    background-color: #0d3872; }\n\n.ConfirmationDialog_dialogButtonNegative__1N69K {\n  background-color: transparent;\n  color: #124fa0; }\n  .ConfirmationDialog_dialogButtonNegative__1N69K:hover {\n    background-color: rgba(18, 79, 160, 0.2); }\n";
var styles = {"dialogHeader":"ConfirmationDialog_dialogHeader__3RZod","dialogHeaderText":"ConfirmationDialog_dialogHeaderText__Ov_Lq","dialogHeaderCloseIcon":"ConfirmationDialog_dialogHeaderCloseIcon__1JYOP","dialogBody":"ConfirmationDialog_dialogBody__3b_cs","dialogText":"ConfirmationDialog_dialogText__1gkMH","dialogButtons":"ConfirmationDialog_dialogButtons__1wyha","dialogButton":"ConfirmationDialog_dialogButton__1YvmK","dialogButtonNegative":"ConfirmationDialog_dialogButtonNegative__1N69K"};
styleInject(css_248z);

var ConfirmationDialog = function ConfirmationDialog() {
  return function (WrappedComponent) {
    return function (props) {
      var _React$useState = React.useState(false),
        _React$useState2 = _slicedToArray(_React$useState, 2),
        modalActive = _React$useState2[0],
        setModalActive = _React$useState2[1];
      var _React$useState3 = React.useState({}),
        _React$useState4 = _slicedToArray(_React$useState3, 2),
        modalContent = _React$useState4[0],
        setModalContent = _React$useState4[1];
      var confirmationCallback = React.useRef(null);
      var activateConfirmationDialog = React.useCallback(function () {
        var modalContent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
        var callback = arguments.length > 1 ? arguments[1] : undefined;
        setModalActive(true);
        setModalContent(modalContent);
        confirmationCallback.current = callback;
      });
      var deactivateConfirmationDialog = React.useCallback(function (e) {
        if (e) {
          e.preventDefault();
          e.stopPropagation();
        }
        confirmationCallback.current = null;
        setModalActive(false);
      });
      var deactivatePositive = React.useCallback(function () {
        if (confirmationCallback.current) confirmationCallback.current(true);
        deactivateConfirmationDialog();
      });
      var deactivateNegative = React.useCallback(function () {
        if (confirmationCallback.current) confirmationCallback.current(false);
        deactivateConfirmationDialog();
      });
      var _modalContent$title = modalContent.title,
        title = _modalContent$title === void 0 ? "Confirm" : _modalContent$title,
        _modalContent$message = modalContent.message,
        message = _modalContent$message === void 0 ? "You have unsaved changes, are you sure you want to continue ?" : _modalContent$message,
        _modalContent$positiv = modalContent.positiveText,
        positiveText = _modalContent$positiv === void 0 ? "Yes" : _modalContent$positiv,
        _modalContent$negativ = modalContent.negativeText,
        negativeText = _modalContent$negativ === void 0 ? "No" : _modalContent$negativ,
        _modalContent$primary = modalContent.primaryActionType,
        primaryActionType = _modalContent$primary === void 0 ? "primary" : _modalContent$primary,
        _modalContent$seconda = modalContent.secondaryActionType,
        secondaryActionType = _modalContent$seconda === void 0 ? "secondary" : _modalContent$seconda;
      var isMessageNode = typeof message !== "string";
      if (modalContent.themed) {
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WrappedComponent
        // eslint-disable-next-line react/jsx-props-no-spreading
        , _extends({}, props, {
          activateConfirmationDialog: activateConfirmationDialog,
          deactivateConfirmationDialog: deactivateConfirmationDialog,
          confirmationDialogActive: modalActive
        })), /*#__PURE__*/React.createElement(Dialog, {
          active: modalActive,
          onEnter: deactivatePositive,
          onClose: deactivateNegative,
          title: title,
          subtitle: !isMessageNode && message,
          primaryActionText: positiveText,
          secondaryActionText: negativeText,
          primaryAction: deactivatePositive,
          secondaryAction: deactivateNegative,
          primaryActionType: primaryActionType,
          secondaryActionType: secondaryActionType,
          dialogStyles: {
            padding: "32px 32px 24px 32px",
            width: "480px"
          }
        }, isMessageNode && message));
      }
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WrappedComponent
      // eslint-disable-next-line react/jsx-props-no-spreading
      , _extends({}, props, {
        activateConfirmationDialog: activateConfirmationDialog,
        deactivateConfirmationDialog: deactivateConfirmationDialog,
        confirmationDialogActive: modalActive
      })), /*#__PURE__*/React.createElement(Modal, {
        active: modalActive,
        onEnter: deactivatePositive,
        onOverlayClick: deactivateNegative
      }, /*#__PURE__*/React.createElement("div", {
        className: styles.dialogHeader
      }, /*#__PURE__*/React.createElement("h3", {
        className: styles.dialogHeaderText
      }, title), /*#__PURE__*/React.createElement(Icon, {
        onClick: deactivateNegative,
        src: CloseIcon,
        className: styles.dialogHeaderCloseIcon
      })), /*#__PURE__*/React.createElement("div", {
        className: styles.dialogBody
      }, /*#__PURE__*/React.createElement("p", {
        className: styles.dialogText
      }, message), /*#__PURE__*/React.createElement("div", {
        className: styles.dialogButtons
      }, /*#__PURE__*/React.createElement("button", {
        type: "button",
        onClick: deactivatePositive,
        className: "".concat(styles.dialogButton, " ").concat(styles.dialogButtonPositive)
      }, positiveText), /*#__PURE__*/React.createElement("button", {
        type: "button",
        onClick: deactivateNegative,
        className: "".concat(styles.dialogButton, " ").concat(styles.dialogButtonNegative)
      }, negativeText)))));
    };
  };
};

export default ConfirmationDialog;
