import { useRef } from 'react';
import Modal from '@bigbinary/neetoui/Modal';
import Typography from '@bigbinary/neetoui/Typography';
import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
import Form from '@bigbinary/neetoui/formik/Form';
import Input from '@bigbinary/neetoui/formik/Input';
import { type } from 'ramda';
import { useTranslation, Trans } from 'react-i18next';
import * as yup from 'yup';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

var INITIAL_VALUES = {
  confirmationText: ""
};

var deletionValidationSchema = function deletionValidationSchema(confirmationText) {
  return yup.object({
    confirmationText: yup.string().required("").oneOf([confirmationText], "")
  });
};

var ConfirmationModal = function ConfirmationModal(_ref) {
  var buttonLabel = _ref.buttonLabel,
    confirmationText = _ref.confirmationText,
    _ref$description = _ref.description,
    description = _ref$description === void 0 ? "" : _ref$description,
    _ref$isOpen = _ref.isOpen,
    isOpen = _ref$isOpen === void 0 ? true : _ref$isOpen,
    _ref$isSubmitting = _ref.isSubmitting,
    isSubmitting = _ref$isSubmitting === void 0 ? false : _ref$isSubmitting,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? "" : _ref$title,
    onClose = _ref.onClose,
    onSubmit = _ref.onSubmit,
    deleteConfirmationMessage = _ref.deleteConfirmationMessage;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var formikProps = {
    initialValues: INITIAL_VALUES,
    validationSchema: deletionValidationSchema(confirmationText),
    onSubmit: onSubmit
  };
  var deleteInputLabel = deleteConfirmationMessage || /*#__PURE__*/jsx(Trans, {
    components: {
      strong: /*#__PURE__*/jsx("strong", {})
    },
    i18nKey: "neetoMolecules.confirmationModal.deleteConfirmationMessage",
    values: {
      value: confirmationText
    }
  });
  var initialFocusRef = useRef(null);
  return /*#__PURE__*/jsxs(Modal, {
    initialFocusRef: initialFocusRef,
    isOpen: isOpen,
    onClose: onClose,
    "data-testid": "confirmation-modal",
    children: [/*#__PURE__*/jsx(Modal.Header, {
      children: /*#__PURE__*/jsx(Typography, {
        "data-testid": "confirmation-modal-title",
        style: "h2",
        children: title
      })
    }), /*#__PURE__*/jsx(Form, {
      formikProps: formikProps,
      children: function children(_ref2) {
        var values = _ref2.values;
        return /*#__PURE__*/jsxs(Fragment, {
          children: [/*#__PURE__*/jsxs(Modal.Body, {
            className: "flex flex-col gap-y-4",
            children: [type(description) === "String" ? /*#__PURE__*/jsx(Typography, {
              style: "body2",
              children: description
            }) : description, /*#__PURE__*/jsx(Input, {
              "data-testid": "confirmation-modal-input",
              label: deleteInputLabel,
              labelProps: {
                className: "block"
              },
              name: "confirmationText",
              ref: initialFocusRef,
              type: "text"
            })]
          }), /*#__PURE__*/jsx(Modal.Footer, {
            children: /*#__PURE__*/jsx(ActionBlock, {
              className: "flex items-center gap-x-2",
              cancelButtonProps: {
                label: t("neetoMolecules.common.actions.cancel"),
                style: "text",
                onClick: onClose,
                disabled: false,
                type: "button"
              },
              submitButtonProps: {
                "data-testid": "delete-continue-button",
                label: buttonLabel,
                loading: isSubmitting,
                style: "danger",
                disabled: isSubmitting || confirmationText !== values.confirmationText
              }
            })
          })]
        });
      }
    })]
  });
};

export { ConfirmationModal as default };
//# sourceMappingURL=ConfirmationModal.js.map
