import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState, useCallback, cloneElement } from 'react';
import useConfirmModal from './useConfirmModal.js';
import Button from '../Button/Button.js';
import { Text, Stack, Input, Box, ButtonGroup } from '@chakra-ui/react';
import 'chakra-react-select';
import 'react-icons/fa';
import '../../styles/theme.js';
import 'react-icons/bs';
import 'react-router-dom';
import 'react-icons/md';
import '@chakra-ui/icons';
import { noop } from '../../utils/utils.js';
import '../Form/FormProvider.js';
import 'react-hook-form';
import '@hookform/devtools';
import '@hookform/resolvers/yup';
import 'yup';
import FormField from '../FormField/FormField.js';
import '../Inputs/Slider/chakra/ChakraTooltip.js';
import 'react-icons/io';
import 'react-syntax-highlighter';
import '../DataTable/DataTable.js';
import '../../styles/colors.js';
import 'date-fns/locale/en-US';
import 'date-fns-tz/zonedTimeToUtc';
import 'react-datepicker';
import 'date-fns';
import 'date-fns-tz';
import '../Inputs/DateTimeInput/Calendar.js';
import '../Popover/PopoverContent.js';
import '../Popover/Popover.js';
import '../Badge/Badge.js';
import 'react-icons/io5';
import '@textea/json-viewer';
import 'react-markdown';
import 'remark-gfm';
import 'remark-emoji';
import '../Login/auth0/Auth0ModalLink.js';

var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};
const DEFAULT_VALUES = {
  LABEL_DELETE: "Delete",
  LABEL_CANCEL: "Cancel",
  INPUT_MATCH_TEXT: "delete",
  // input value must match this text to enable the delete button
  TEXT_DELETE_INSTRUCTIONS: `This action will cause data loss. To confirm, type "%input_match_text%" into the confirmation box below.`,
  NOOP: noop
};
const ConfirmItemDeleteModal = (props) => {
  const {
    trigger,
    itemType,
    primaryActionLabel,
    secondaryActionLabel,
    inputMatchText = DEFAULT_VALUES.INPUT_MATCH_TEXT,
    onConfirm,
    onClose = DEFAULT_VALUES.NOOP,
    heading = `${DEFAULT_VALUES.LABEL_DELETE} ${itemType}`,
    children = /* @__PURE__ */ jsx(Text, { children: DEFAULT_VALUES.TEXT_DELETE_INSTRUCTIONS.replace(/%input_match_text%/, inputMatchText) }),
    requireValidation = true
  } = props;
  const [valid, setValid] = useState("");
  const [isDeleting, setIsDeleting] = useState(false);
  const [deleteErrorMessage, setDeleteErrorMessage] = useState(null);
  const onError = useCallback((msg) => {
    setIsDeleting(false);
    setDeleteErrorMessage(msg);
  }, []);
  const resetState = useCallback(() => {
    setValid("");
    setIsDeleting(false);
    setDeleteErrorMessage(null);
  }, []);
  const onCancel = useCallback(() => {
    onClose();
  }, [onClose]);
  const handleOnClick = useCallback(() => __async(void 0, null, function* () {
    resetState();
    yield showModal().catch(() => onCancel());
  }), []);
  const getTriggerElement = useCallback(() => {
    if (typeof trigger === "string") {
      return /* @__PURE__ */ jsx(Button, { variant: "delete", "data-testid": "trigger-delete-button", onClick: handleOnClick, children: trigger });
    } else {
      return cloneElement(trigger, {
        onClick: (event) => {
          var _a, _b;
          (_b = (_a = trigger.props).onClick) == null ? void 0 : _b.call(_a, event);
          handleOnClick();
        }
      });
    }
  }, [handleOnClick, trigger]);
  const getPrimaryButtonLabel = useCallback(() => {
    return primaryActionLabel || DEFAULT_VALUES.LABEL_DELETE;
  }, [primaryActionLabel]);
  const getSecondaryButtonLabel = useCallback(() => {
    return secondaryActionLabel || DEFAULT_VALUES.LABEL_CANCEL;
  }, [secondaryActionLabel]);
  const inputTextDoesNotMatch = useCallback((text) => {
    return text.toLowerCase() !== inputMatchText.toLowerCase();
  }, []);
  const { showModal, renderModal } = useConfirmModal({
    heading,
    render: ({ confirm, cancel }) => {
      return /* @__PURE__ */ jsxs(Stack, { spacing: "4", children: [
        children,
        /* @__PURE__ */ jsx(
          FormField,
          {
            label: "",
            isInvalid: valid !== "" && inputTextDoesNotMatch(valid),
            errorText: `Text must match "${inputMatchText}"`,
            children: /* @__PURE__ */ jsx(
              Input,
              {
                type: "text",
                name: "name",
                "data-testid": "txt-confirmation-delete",
                placeholder: `Type "${inputMatchText}" to confirm`,
                onChange: (v) => setValid(v.target.value)
              }
            )
          }
        ),
        deleteErrorMessage && /* @__PURE__ */ jsx(Text, { color: "error.500", children: deleteErrorMessage }),
        /* @__PURE__ */ jsx(Box, { alignSelf: "end", children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
          /* @__PURE__ */ jsx(
            Button,
            {
              variant: "delete",
              "data-testid": `test-delete-item`,
              id: "delete-modal-btn",
              onClick: () => {
                setIsDeleting(true);
                setDeleteErrorMessage(null);
                onConfirm(confirm, onError);
              },
              isLoading: isDeleting,
              isDisabled: props.isDisabled || valid === "" || requireValidation && inputTextDoesNotMatch(valid),
              children: getPrimaryButtonLabel()
            }
          ),
          /* @__PURE__ */ jsx(Button, { variant: "ghost", "data-testid": `test-cancel-item`, onClick: cancel, children: getSecondaryButtonLabel() })
        ] }) })
      ] });
    }
  });
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    getTriggerElement(),
    renderModal()
  ] });
};

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