import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import React__default, { useState, useEffect } from "react";
import { RawTable, Flex, FieldLabel, Loader, RawThead, RawTr, RawTh, VisuallyHidden, Typography, RawTbody, RawTd, Checkbox, BaseCheckbox, CreatableCombobox, ComboboxOption, Box, Grid, GridItem, TextInput, TextButton, HeaderLayout, Button, ContentLayout, Main } from "@strapi/design-system";
import { RemoveRoundedButton, pxToRem, Form, Link, useNotification, useAPIErrorHandler, useFetchClient, LoadingIndicatorPage, SettingsPageTitle } from "@strapi/helper-plugin";
import { useQueryClient, useQuery, useMutation } from "react-query";
import { useRouteMatch, useHistory } from "react-router-dom";
import { u as useContentTypes } from "./useContentTypes-53b449bb.mjs";
import { Plus, Loader as Loader$1, Check, Cross, Play, ArrowLeft } from "@strapi/icons";
import { useFormikContext, FieldArray, Field, useFormik, FormikProvider } from "formik";
import PropTypes from "prop-types";
import { useIntl } from "react-intl";
import { p as useEnterprise } from "./index-466b22f5.mjs";
import styled from "styled-components";
import * as yup from "yup";
const formatValue = (value) => value.reduce((acc, curr) => {
  const key = curr.split(".")[0];
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(curr);
  return acc;
}, {});
const StyledTable = styled(RawTable)`
  tbody tr:nth-child(odd) {
    background: ${({ theme }) => theme.colors.neutral100};
  }

  thead th span {
    color: ${({ theme }) => theme.colors.neutral500};
  }

  td,
  th {
    padding-block-start: ${({ theme }) => theme.spaces[3]};
    padding-block-end: ${({ theme }) => theme.spaces[3]};
    width: 10%;
    vertical-align: middle;
    text-align: center;
  }

  tbody tr td:first-child {
    /**
     * Add padding to the start of the first column to avoid the checkbox appearing
     * too close to the edge of the table
     */
    padding-inline-start: ${({ theme }) => theme.spaces[2]};
  }
`;
const getCEHeaders = (isDraftAndPublish) => {
  const headers = [
    { id: "Settings.webhooks.events.create", defaultMessage: "Create" },
    { id: "Settings.webhooks.events.update", defaultMessage: "Update" },
    { id: "app.utils.delete", defaultMessage: "Delete" }
  ];
  if (isDraftAndPublish) {
    headers.push({ id: "app.utils.publish", defaultMessage: "Publish" });
    headers.push({ id: "app.utils.unpublish", defaultMessage: "Unpublish" });
  }
  return headers;
};
const getCEEvents = (isDraftAndPublish) => {
  const entryEvents = ["entry.create", "entry.update", "entry.delete"];
  if (isDraftAndPublish) {
    entryEvents.push("entry.publish", "entry.unpublish");
  }
  return {
    entry: entryEvents,
    media: ["media.create", "media.update", "media.delete"]
  };
};
const WebhookEventContext = React.createContext();
const Root = ({ children }) => {
  const { formatMessage } = useIntl();
  const { collectionTypes, isLoading } = useContentTypes();
  const isDraftAndPublish = React.useMemo(
    () => collectionTypes.some((ct) => ct.options.draftAndPublish === true),
    [collectionTypes]
  );
  const label = formatMessage({
    id: "Settings.webhooks.form.events",
    defaultMessage: "Events"
  });
  return /* @__PURE__ */ jsx(WebhookEventContext.Provider, { value: { isDraftAndPublish }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
    /* @__PURE__ */ jsx(FieldLabel, { "aria-hidden": true, children: label }),
    isLoading && /* @__PURE__ */ jsx(Loader, { children: formatMessage({
      id: "Settings.webhooks.events.isLoading",
      defaultMessage: "Events loading"
    }) }),
    /* @__PURE__ */ jsx(StyledTable, { "aria-label": label, children })
  ] }) });
};
Root.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};
const Headers = ({ getHeaders = getCEHeaders }) => {
  const { isDraftAndPublish } = React.useContext(WebhookEventContext);
  const { formatMessage } = useIntl();
  const headers = getHeaders(isDraftAndPublish);
  return /* @__PURE__ */ jsx(RawThead, { children: /* @__PURE__ */ jsxs(RawTr, { children: [
    /* @__PURE__ */ jsx(RawTh, { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: formatMessage({
      id: "Settings.webhooks.event.select",
      defaultMessage: "Select event"
    }) }) }),
    headers.map((header) => {
      if (["app.utils.publish", "app.utils.unpublish"].includes(header.id)) {
        return /* @__PURE__ */ jsx(
          RawTh,
          {
            title: formatMessage({
              id: "Settings.webhooks.event.publish-tooltip",
              defaultMessage: "This event only exists for content with draft & publish enabled"
            }),
            children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage(header) })
          },
          header.id
        );
      }
      return /* @__PURE__ */ jsx(RawTh, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage(header) }) }, header.id);
    })
  ] }) });
};
Headers.defaultProps = {
  getHeaders: getCEHeaders
};
Headers.propTypes = {
  getHeaders: PropTypes.func
};
const Body = ({ providedEvents }) => {
  const { isDraftAndPublish } = React.useContext(WebhookEventContext);
  const events = providedEvents || getCEEvents(isDraftAndPublish);
  const { values, handleChange: onChange } = useFormikContext();
  const inputName = "events";
  const inputValue = values.events;
  const disabledEvents = [];
  const formattedValue = formatValue(inputValue);
  const handleSelect = ({ target: { name, value } }) => {
    let set = new Set(inputValue);
    if (value) {
      set.add(name);
    } else {
      set.delete(name);
    }
    onChange({ target: { name: inputName, value: Array.from(set) } });
  };
  const handleSelectAll = ({ target: { name, value } }) => {
    let set = new Set(inputValue);
    if (value) {
      events[name].forEach((event) => {
        if (!disabledEvents.includes(event)) {
          set.add(event);
        }
      });
    } else {
      events[name].forEach((event) => set.delete(event));
    }
    onChange({ target: { name: inputName, value: Array.from(set) } });
  };
  return /* @__PURE__ */ jsx(RawTbody, { children: Object.entries(events).map(([event, value]) => {
    return /* @__PURE__ */ jsx(
      EventRow,
      {
        disabledEvents,
        name: event,
        events: value,
        inputValue: formattedValue[event],
        handleSelect,
        handleSelectAll
      },
      event
    );
  }) });
};
Body.defaultProps = {
  providedEvents: null
};
Body.propTypes = {
  providedEvents: PropTypes.object
};
const removeHyphensAndTitleCase = (str) => str.replace(/-/g, " ").split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
const EventRow = ({ disabledEvents, name, events, inputValue, handleSelect, handleSelectAll }) => {
  const { formatMessage } = useIntl();
  const enabledCheckboxes = events.filter((event) => !disabledEvents.includes(event));
  const hasSomeCheckboxSelected = inputValue.length > 0;
  const areAllCheckboxesSelected = inputValue.length === enabledCheckboxes.length;
  const onChangeAll = ({ target: { name: name2 } }) => {
    const valueToSet = !areAllCheckboxesSelected;
    handleSelectAll({
      target: { name: name2, value: valueToSet }
    });
  };
  const targetColumns = 5;
  return /* @__PURE__ */ jsxs(RawTr, { children: [
    /* @__PURE__ */ jsx(RawTd, { children: /* @__PURE__ */ jsx(
      Checkbox,
      {
        indeterminate: hasSomeCheckboxSelected && !areAllCheckboxesSelected,
        "aria-label": formatMessage({
          id: "global.select-all-entries",
          defaultMessage: "Select all entries"
        }),
        name,
        onChange: onChangeAll,
        value: areAllCheckboxesSelected,
        children: removeHyphensAndTitleCase(name)
      }
    ) }),
    events.map((event) => {
      return /* @__PURE__ */ jsx(RawTd, { children: /* @__PURE__ */ jsx(
        BaseCheckbox,
        {
          disabled: disabledEvents.includes(event),
          "aria-label": event,
          name: event,
          value: inputValue.includes(event),
          onValueChange: (value) => handleSelect({ target: { name: event, value } })
        }
      ) }, event);
    }),
    events.length < targetColumns && /* @__PURE__ */ jsx(RawTd, { colSpan: targetColumns - events.length })
  ] });
};
EventRow.defaultProps = {
  disabledEvents: [],
  events: [],
  inputValue: [],
  handleSelect() {
  },
  handleSelectAll() {
  }
};
EventRow.propTypes = {
  disabledEvents: PropTypes.array,
  events: PropTypes.array,
  inputValue: PropTypes.array,
  handleSelect: PropTypes.func,
  handleSelectAll: PropTypes.func,
  name: PropTypes.string.isRequired
};
const EventTable = { Root, Headers, Body, EventRow };
function EventTableCE() {
  return /* @__PURE__ */ jsxs(EventTable.Root, { children: [
    /* @__PURE__ */ jsx(EventTable.Headers, {}),
    /* @__PURE__ */ jsx(EventTable.Body, {})
  ] });
}
const HTTP_HEADERS = [
  "A-IM",
  "Accept",
  "Accept-Charset",
  "Accept-Encoding",
  "Accept-Language",
  "Accept-Datetime",
  "Access-Control-Request-Method",
  "Access-Control-Request-Headers",
  "Authorization",
  "Cache-Control",
  "Connection",
  "Content-Length",
  "Content-Type",
  "Cookie",
  "Date",
  "Expect",
  "Forwarded",
  "From",
  "Host",
  "If-Match",
  "If-Modified-Since",
  "If-None-Match",
  "If-Range",
  "If-Unmodified-Since",
  "Max-Forwards",
  "Origin",
  "Pragma",
  "Proxy-Authorization",
  "Range",
  "Referer",
  "TE",
  "User-Agent",
  "Upgrade",
  "Via",
  "Warning"
];
const Combobox = ({ name, onChange, value, ...props }) => {
  const {
    values: { headers }
  } = useFormikContext();
  const [options, setOptions] = useState(HTTP_HEADERS);
  useEffect(() => {
    setOptions(
      HTTP_HEADERS.filter(
        (key) => !headers?.some((header) => header.key !== value && header.key === key)
      )
    );
  }, [headers, value]);
  const handleChange = (value2) => {
    onChange({ target: { name, value: value2 } });
  };
  const handleCreateOption = (value2) => {
    setOptions((prev) => [...prev, value2]);
    handleChange(value2);
  };
  return /* @__PURE__ */ jsx(
    CreatableCombobox,
    {
      ...props,
      onClear: () => handleChange(""),
      onChange: handleChange,
      onCreateOption: handleCreateOption,
      placeholder: "",
      value,
      children: options.map((key) => /* @__PURE__ */ jsx(ComboboxOption, { value: key, children: key }, key))
    }
  );
};
Combobox.defaultProps = {
  value: void 0
};
Combobox.propTypes = {
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  value: PropTypes.string
};
const HeadersInput = () => {
  const { formatMessage } = useIntl();
  const { values, errors } = useFormikContext();
  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
    /* @__PURE__ */ jsx(FieldLabel, { children: formatMessage({
      id: "Settings.webhooks.form.headers",
      defaultMessage: "Headers"
    }) }),
    /* @__PURE__ */ jsx(Box, { padding: 8, background: "neutral100", hasRadius: true, children: /* @__PURE__ */ jsx(
      FieldArray,
      {
        validateOnChange: false,
        name: "headers",
        render: ({ push, remove }) => /* @__PURE__ */ jsxs(Grid, { gap: 4, children: [
          values.headers.map((header, index) => (
            // eslint-disable-next-line
            /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
              /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsx(
                Field,
                {
                  as: Combobox,
                  name: `headers.${index}.key`,
                  "aria-label": `row ${index + 1} key`,
                  label: formatMessage({
                    id: "Settings.webhooks.key",
                    defaultMessage: "Key"
                  }),
                  error: errors.headers?.[index]?.key && errors.headers[index].key
                }
              ) }),
              /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-end", children: [
                /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
                  Field,
                  {
                    as: TextInput,
                    name: `headers.${index}.value`,
                    "aria-label": `row ${index + 1} value`,
                    label: formatMessage({
                      id: "Settings.webhooks.value",
                      defaultMessage: "Value"
                    }),
                    error: errors.headers?.[index]?.value && errors.headers[index].value
                  }
                ) }),
                /* @__PURE__ */ jsx(
                  Flex,
                  {
                    paddingLeft: 2,
                    style: { alignSelf: "center" },
                    paddingTop: errors.headers?.[index]?.value ? 0 : 5,
                    children: /* @__PURE__ */ jsx(
                      RemoveRoundedButton,
                      {
                        disabled: values.headers.length === 1,
                        onClick: () => remove(index),
                        label: formatMessage(
                          {
                            id: "Settings.webhooks.headers.remove",
                            defaultMessage: "Remove header row {number}"
                          },
                          { number: index + 1 }
                        )
                      }
                    )
                  }
                )
              ] }) })
            ] }, `${index}.${header.key}`)
          )),
          /* @__PURE__ */ jsx(GridItem, { col: 12, children: /* @__PURE__ */ jsx(
            TextButton,
            {
              type: "button",
              onClick: () => {
                push({ key: "", value: "" });
              },
              startIcon: /* @__PURE__ */ jsx(Plus, {}),
              children: formatMessage({
                id: "Settings.webhooks.create.header",
                defaultMessage: "Create new header"
              })
            }
          ) })
        ] })
      }
    ) })
  ] });
};
const Icon = styled.svg(
  ({ theme, color }) => `
  width: ${12 / 16}rem;
  height: ${12 / 16}rem;

  path {
    fill: ${theme.colors[color]};
  }
`
);
const Status = ({ isPending, statusCode }) => {
  const { formatMessage } = useIntl();
  if (isPending) {
    return /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
      /* @__PURE__ */ jsx(Icon, { as: Loader$1 }),
      /* @__PURE__ */ jsx(Typography, { children: formatMessage({ id: "Settings.webhooks.trigger.pending", defaultMessage: "pending" }) })
    ] });
  }
  if (statusCode >= 200 && statusCode < 300) {
    return /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
      /* @__PURE__ */ jsx(Icon, { as: Check, color: "success700" }),
      /* @__PURE__ */ jsx(Typography, { children: formatMessage({ id: "Settings.webhooks.trigger.success", defaultMessage: "success" }) })
    ] });
  }
  if (statusCode >= 300) {
    return /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
      /* @__PURE__ */ jsx(Icon, { as: Cross, color: "danger700" }),
      /* @__PURE__ */ jsxs(Typography, { children: [
        formatMessage({ id: "Settings.error", defaultMessage: "error" }),
        " ",
        statusCode
      ] })
    ] });
  }
  return null;
};
Status.propTypes = {
  isPending: PropTypes.bool.isRequired,
  statusCode: PropTypes.number
};
Status.defaultProps = {
  statusCode: void 0
};
const Message = ({ statusCode, message }) => {
  const { formatMessage } = useIntl();
  if (statusCode >= 200 && statusCode < 300) {
    return /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", ellipsis: true, children: formatMessage({
      id: "Settings.webhooks.trigger.success.label",
      defaultMessage: "Trigger succeeded"
    }) }) });
  }
  if (statusCode >= 300) {
    return /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Flex, { maxWidth: pxToRem(250), justifyContent: "flex-end", title: message, children: /* @__PURE__ */ jsx(Typography, { ellipsis: true, textColor: "neutral600", children: message }) }) });
  }
  return null;
};
Message.propTypes = {
  statusCode: PropTypes.number,
  message: PropTypes.string
};
Message.defaultProps = {
  statusCode: void 0,
  message: void 0
};
const CancelButton = ({ onCancel }) => {
  const { formatMessage } = useIntl();
  return /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx("button", { onClick: onCancel, type: "button", children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
    /* @__PURE__ */ jsx(Typography, { textColor: "neutral400", children: formatMessage({ id: "Settings.webhooks.trigger.cancel", defaultMessage: "cancel" }) }),
    /* @__PURE__ */ jsx(Icon, { as: Cross, color: "neutral400" })
  ] }) }) });
};
CancelButton.propTypes = { onCancel: PropTypes.func.isRequired };
const TriggerContainer = ({ isPending, onCancel, response }) => {
  const { statusCode, message } = response;
  const { formatMessage } = useIntl();
  return /* @__PURE__ */ jsx(Box, { background: "neutral0", padding: 5, shadow: "filterShadow", hasRadius: true, children: /* @__PURE__ */ jsxs(Grid, { gap: 4, style: { alignItems: "center" }, children: [
    /* @__PURE__ */ jsx(GridItem, { col: 3, children: /* @__PURE__ */ jsx(Typography, { children: formatMessage({
      id: "Settings.webhooks.trigger.test",
      defaultMessage: "Test-trigger"
    }) }) }),
    /* @__PURE__ */ jsx(GridItem, { col: 3, children: /* @__PURE__ */ jsx(Status, { isPending, statusCode }) }),
    /* @__PURE__ */ jsx(GridItem, { col: 6, children: !isPending ? /* @__PURE__ */ jsx(Message, { statusCode, message }) : /* @__PURE__ */ jsx(CancelButton, { onCancel }) })
  ] }) });
};
TriggerContainer.defaultProps = {
  isPending: false,
  onCancel() {
  },
  response: {}
};
TriggerContainer.propTypes = {
  isPending: PropTypes.bool,
  onCancel: PropTypes.func,
  response: PropTypes.object
};
const NAME_REGEX = /(^$)|(^[A-Za-z][_0-9A-Za-z ]*$)/;
const URL_REGEX = /(^$)|((https?:\/\/.*)(d*)\/?(.*))/;
const makeWebhookValidationSchema = ({ formatMessage }) => yup.object().shape({
  name: yup.string().required(
    formatMessage({
      id: "Settings.webhooks.validation.name.required",
      defaultMessage: "Name is required"
    })
  ).matches(
    NAME_REGEX,
    formatMessage({
      id: "Settings.webhooks.validation.name.regex",
      defaultMessage: "The name must start with a letter and only contain letters, numbers, spaces and underscores"
    })
  ),
  url: yup.string().required(
    formatMessage({
      id: "Settings.webhooks.validation.url.required",
      defaultMessage: "Url is required"
    })
  ).matches(
    URL_REGEX,
    formatMessage({
      id: "Settings.webhooks.validation.url.regex",
      defaultMessage: "The value must be a valid Url"
    })
  ),
  headers: yup.lazy((array) => {
    let baseSchema = yup.array();
    if (array.length === 1) {
      const { key, value } = array[0];
      if (!key && !value) {
        return baseSchema;
      }
    }
    return baseSchema.of(
      yup.object().shape({
        key: yup.string().required(
          formatMessage({
            id: "Settings.webhooks.validation.key",
            defaultMessage: "Key is required"
          })
        ),
        value: yup.string().required(
          formatMessage({
            id: "Settings.webhooks.validation.value",
            defaultMessage: "Value is required"
          })
        )
      })
    );
  }),
  events: yup.array()
});
const WebhookForm = ({
  handleSubmit,
  triggerWebhook,
  isCreating,
  isTriggering,
  triggerResponse,
  data
}) => {
  const { formatMessage } = useIntl();
  const [showTriggerResponse, setShowTriggerResponse] = useState(false);
  const EventTable2 = useEnterprise(
    EventTableCE,
    async () => (await import("./index-08ed68bc.mjs")).EventTableEE
  );
  const mapHeaders = (headers) => {
    if (!Object.keys(headers).length) {
      return [{ key: "", value: "" }];
    }
    return Object.entries(headers).map(([key, value]) => ({ key, value }));
  };
  const formik = useFormik({
    initialValues: {
      name: data?.name || "",
      url: data?.url || "",
      headers: mapHeaders(data?.headers || {}),
      events: data?.events || []
    },
    onSubmit(values, { resetForm, setSubmitting }) {
      handleSubmit(values);
      resetForm({ values });
      setSubmitting(false);
    },
    validationSchema: makeWebhookValidationSchema({ formatMessage }),
    validateOnChange: false,
    validateOnBlur: false
  });
  if (!EventTable2) {
    return null;
  }
  return /* @__PURE__ */ jsx(FormikProvider, { value: formik, children: /* @__PURE__ */ jsxs(Form, { onSubmit: formik.handleSubmit, children: [
    /* @__PURE__ */ jsx(
      HeaderLayout,
      {
        primaryAction: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
          /* @__PURE__ */ jsx(
            Button,
            {
              onClick: () => {
                triggerWebhook();
                setShowTriggerResponse(true);
              },
              variant: "tertiary",
              startIcon: /* @__PURE__ */ jsx(Play, {}),
              disabled: isCreating || isTriggering,
              size: "L",
              children: formatMessage({
                id: "Settings.webhooks.trigger",
                defaultMessage: "Trigger"
              })
            }
          ),
          /* @__PURE__ */ jsx(
            Button,
            {
              startIcon: /* @__PURE__ */ jsx(Check, {}),
              type: "submit",
              size: "L",
              disabled: !formik.dirty,
              loading: formik.isSubmitting,
              children: formatMessage({
                id: "global.save",
                defaultMessage: "Save"
              })
            }
          )
        ] }),
        title: isCreating ? formatMessage({
          id: "Settings.webhooks.create",
          defaultMessage: "Create a webhook"
        }) : data?.name,
        navigationAction: /* @__PURE__ */ jsx(Link, { startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}), to: "/settings/webhooks", children: formatMessage({
          id: "global.back",
          defaultMessage: "Back"
        }) })
      }
    ),
    /* @__PURE__ */ jsx(ContentLayout, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
      showTriggerResponse && /* @__PURE__ */ jsx(
        TriggerContainer,
        {
          isPending: isTriggering,
          response: triggerResponse,
          onCancel: () => setShowTriggerResponse(false)
        }
      ),
      /* @__PURE__ */ jsx(Box, { background: "neutral0", padding: 8, shadow: "filterShadow", hasRadius: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
        /* @__PURE__ */ jsxs(Grid, { gap: 6, children: [
          /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsx(
            Field,
            {
              as: TextInput,
              name: "name",
              error: formik?.errors?.name && formik.errors.name,
              label: formatMessage({
                id: "global.name",
                defaultMessage: "Name"
              }),
              required: true
            }
          ) }),
          /* @__PURE__ */ jsx(GridItem, { col: 12, children: /* @__PURE__ */ jsx(
            Field,
            {
              as: TextInput,
              name: "url",
              error: formik?.errors?.url && formik.errors.url,
              label: formatMessage({
                id: "Settings.roles.form.input.url",
                defaultMessage: "Url"
              }),
              required: true
            }
          ) })
        ] }),
        /* @__PURE__ */ jsx(HeadersInput, {}),
        /* @__PURE__ */ jsx(EventTable2, {})
      ] }) })
    ] }) })
  ] }) });
};
WebhookForm.propTypes = {
  data: PropTypes.object,
  handleSubmit: PropTypes.func.isRequired,
  triggerWebhook: PropTypes.func.isRequired,
  isCreating: PropTypes.bool.isRequired,
  isTriggering: PropTypes.bool.isRequired,
  triggerResponse: PropTypes.object
};
WebhookForm.defaultProps = {
  data: void 0,
  triggerResponse: void 0
};
const cleanData = (data) => ({
  ...data,
  headers: data.headers.reduce((acc, { key, value }) => {
    if (key !== "") {
      acc[key] = value;
    }
    return acc;
  }, {})
});
const EditView = () => {
  const {
    params: { id }
  } = useRouteMatch("/settings/webhooks/:id");
  const isCreating = id === "create";
  const { replace } = useHistory();
  const toggleNotification = useNotification();
  const { formatAPIError } = useAPIErrorHandler();
  const queryClient = useQueryClient();
  const { isLoading: isLoadingForModels } = useContentTypes();
  const { put, get, post } = useFetchClient();
  const {
    isLoading,
    data: webhookData,
    error: webhookError
  } = useQuery(
    ["webhooks", id],
    async () => {
      const {
        data: { data }
      } = await get(`/admin/webhooks/${id}`);
      return data;
    },
    {
      enabled: !isCreating
    }
  );
  React.useEffect(() => {
    if (webhookError) {
      toggleNotification({
        type: "warning",
        message: formatAPIError(webhookError)
      });
    }
  }, [webhookError, toggleNotification, formatAPIError]);
  const {
    isLoading: isTriggering,
    data: triggerResponse,
    isIdle: isTriggerIdle,
    mutate
  } = useMutation(() => post(`/admin/webhooks/${id}/trigger`));
  const triggerWebhook = () => mutate(null, {
    onError(error) {
      toggleNotification({
        type: "warning",
        message: formatAPIError(error)
      });
    }
  });
  const createWebhookMutation = useMutation((body) => post("/admin/webhooks", body));
  const updateWebhookMutation = useMutation(({ id: id2, body }) => put(`/admin/webhooks/${id2}`, body));
  const handleSubmit = async (data) => {
    if (isCreating) {
      createWebhookMutation.mutate(cleanData(data), {
        onSuccess({ data: result }) {
          toggleNotification({
            type: "success",
            message: { id: "Settings.webhooks.created" }
          });
          replace(`/settings/webhooks/${result.data.id}`);
        },
        onError(error) {
          toggleNotification({
            type: "warning",
            message: formatAPIError(error)
          });
        }
      });
      return;
    }
    updateWebhookMutation.mutate(
      { id, body: cleanData(data) },
      {
        onSuccess() {
          queryClient.invalidateQueries(["webhooks", id]);
          toggleNotification({
            type: "success",
            message: { id: "notification.form.success.fields" }
          });
        },
        onError(error) {
          toggleNotification({
            type: "warning",
            message: formatAPIError(error)
          });
        }
      }
    );
  };
  if (isLoading || isLoadingForModels) {
    return /* @__PURE__ */ jsx(LoadingIndicatorPage, {});
  }
  return /* @__PURE__ */ jsxs(Main, { children: [
    /* @__PURE__ */ jsx(SettingsPageTitle, { name: "Webhooks" }),
    /* @__PURE__ */ jsx(
      WebhookForm,
      {
        ...{
          data: webhookData,
          handleSubmit,
          triggerWebhook,
          isCreating,
          isTriggering,
          isTriggerIdle,
          triggerResponse: triggerResponse?.data.data
        }
      }
    )
  ] });
};
export {
  EditView as E,
  EventTable as a
};
//# sourceMappingURL=index-29802474.mjs.map
