import { z as I, A as _, G as L, j as i, O as w, a as e, P as R, V as P, a1 as Z, W, B, as as te, ac as J, u as ae, n as ie, r as K, U as Y, Z as re, bd as q, ao as se, aL as le, aM as de, aN as he, aO as ce, aP as ue, aQ as pe, aR as ee, F as z, o as k, T as f, aW as A, aX as j, I as D, p as U, y as be, t as ge, C as me } from "./App-f49e4ede.mjs";
import h from "react";
function $({
  formRef: p,
  type: t
}) {
  var o, d, O, F, V, y, S;
  const b = p.watch(), s = I.cloneDeep(((o = b.webhook) == null ? void 0 : o[t]) || []), M = h.useCallback(() => p.setValue(`webhook.${t}`, [...s, {
    id: _(3),
    value: ["", ""]
  }]), [s]), {
    setIsModify: C
  } = L.useActions(), v = L.useSelectState((c) => c.isModify), g = h.useCallback((c, u) => {
    const m = s.findIndex((E) => E.id === u);
    if (m < 0)
      return;
    s[m].value[0] && (s[m].value[1] = c.target.value, p.setValue(`webhook.${t}`, s)), !v && C(!0);
  }, [(d = b.webhook) == null ? void 0 : d.headers, (O = b.webhook) == null ? void 0 : O.body, s, v]), n = h.useCallback((c, u) => {
    const m = s.findIndex((T) => T.id === u);
    m < 0 || (s[m].value[0] = c.target.value, p.setValue(`webhook.${t}`, s), !v && C(!0));
  }, [(F = b.webhook) == null ? void 0 : F.headers, (V = b.webhook) == null ? void 0 : V.body, s, v]), l = h.useCallback((c) => {
    const u = s.findIndex((m) => m.id === c);
    s.splice(u, 1), !(u < 0) && (p.setValue(`webhook.${t}`, s), !v && C(!0));
  }, [(y = b.webhook) == null ? void 0 : y.headers, (S = b.webhook) == null ? void 0 : S.body, s, v]);
  return /* @__PURE__ */ i(w, {
    children: [/* @__PURE__ */ e(R, {
      children: I.capitalize(t)
    }), /* @__PURE__ */ i(P, {
      alignItems: "start",
      children: [s == null ? void 0 : s.map((c) => /* @__PURE__ */ i(Z, {
        children: [/* @__PURE__ */ e(W, {
          width: "45%",
          placeholder: "Property",
          value: c.value[0],
          onChange: (u) => n(u, c.id)
        }), /* @__PURE__ */ e(W, {
          width: "45%",
          placeholder: "Value",
          value: c.value[1],
          onChange: (u) => g(u, c.id)
        }), /* @__PURE__ */ e(B, {
          size: "sm",
          variant: "outline",
          onClick: (u) => l(c.id),
          children: /* @__PURE__ */ e(te, {
            fontSize: "24px"
          })
        })]
      }, c.id)), /* @__PURE__ */ i(B, {
        leftIcon: /* @__PURE__ */ e(J, {
          fontSize: "20px",
          color: "#0065FF"
        }),
        size: "xs",
        variant: "link",
        color: "#0065FF",
        onClick: M,
        _focus: {
          borderWidth: "0px"
        },
        _hover: {
          textDecoration: "none"
        },
        fontWeight: "normal",
        children: ["Add ", t === "headers" ? t.slice(0, -1) : t]
      })]
    })]
  });
}
const X = "4px 0px 0px 4px", G = "0px 4px 4px 0px", ne = [{
  label: "Insert",
  value: "INSERT"
}, {
  label: "Update",
  value: "UPDATE"
}, {
  label: "Delete",
  value: "DELETE"
}];
function ve({
  modalDisclosure: p,
  table: t
}) {
  var u, m, T, E;
  const b = h.useRef(null), [s, M] = h.useState(!1), C = ae(), v = ie(), g = K(), n = h.useMemo(() => ({
    table: (t == null ? void 0 : t.name) || "",
    name: "",
    event: void 0,
    destination: void 0,
    webhook: {
      contentType: "application/json",
      method: void 0,
      url: "",
      headers: [],
      body: []
    }
  }), [t == null ? void 0 : t.name]), l = Y({
    defaultValues: n,
    mode: "onChange"
  }), o = l.watch(), d = re(), O = h.useCallback(async (r) => {
    try {
      M(!0), await v.migrateTrigger({
        operation: "Create",
        migration: {
          ...r,
          webhook: {
            ...r.webhook,
            headers: q(r.webhook.headers),
            body: q(r.webhook.body)
          }
        }
      }), await g.revalidate(), C.push(`/tables/${(t == null ? void 0 : t.name) || ""}/triggers/${I.snakeCase(r.name)}`), y();
    } catch (a) {
      const x = a.response.data.message.split("-");
      d({
        description: `${x[x.length - 2]}`,
        status: "error",
        isClosable: !0
      });
    }
    M(!1);
  }, [g, t]), F = h.useCallback((r) => {
    r.value === "UPDATE" ? o.destination = "" : delete o.destination, l.reset(o), l.setValue("event", r.value);
  }, [l, o]), V = h.useCallback((r) => {
    l.setValue("destination", r.value);
  }, [l]), y = h.useCallback(() => {
    var r;
    (r = p == null ? void 0 : p.onClose) == null || r.call(p), l.reset(n);
  }, [l, p, n]), S = h.useMemo(() => !!Object.entries(o).filter(([a, x]) => I.isEmpty(x) || // @ts-ignore
  a === "webhook" && (!(x != null && x.url) || !(x != null && x.method))).length, [o]), c = h.useCallback((r) => {
    l.setValue("webhook.method", r.value), r.value === "GET" && l.setValue("webhook.body", []);
  }, []);
  return /* @__PURE__ */ e(se, {
    children: /* @__PURE__ */ i(le, {
      isOpen: p.isOpen || !1,
      onClose: y,
      isCentered: !0,
      initialFocusRef: b,
      closeOnEsc: !1,
      size: "xl",
      children: [/* @__PURE__ */ e(de, {}), /* @__PURE__ */ i(he, {
        children: [/* @__PURE__ */ e(ce, {
          children: "Create Event Trigger"
        }), /* @__PURE__ */ e(ue, {}), /* @__PURE__ */ e(pe, {
          children: /* @__PURE__ */ e("form", {
            onSubmit: l.handleSubmit(O),
            children: /* @__PURE__ */ i(P, {
              spacing: 5,
              width: "100%",
              marginBottom: "16px",
              children: [/* @__PURE__ */ i(w, {
                isRequired: !0,
                children: [/* @__PURE__ */ e(R, {
                  htmlFor: "title",
                  children: "Trigger name"
                }), /* @__PURE__ */ e(W, {
                  id: "title",
                  ref: b,
                  fontSize: "14px",
                  isDisabled: s,
                  placeholder: "Type trigger name",
                  onChange: (r) => {
                    l.setValue("name", I.snakeCase(r.currentTarget.value));
                  }
                }), ((u = l.formState.errors.name) == null ? void 0 : u.message) && /* @__PURE__ */ e(ee, {
                  children: (m = l.formState.errors.name) == null ? void 0 : m.message
                })]
              }), /* @__PURE__ */ i(w, {
                isRequired: !0,
                children: [/* @__PURE__ */ e(R, {
                  children: "Trigger Operations"
                }), /* @__PURE__ */ i(z, {
                  alignItems: "center",
                  children: [/* @__PURE__ */ e(k, {
                    padding: "0.4rem",
                    paddingInline: "15px",
                    bgColor: "gray.100",
                    borderRadius: X,
                    borderLeft: "0px",
                    border: "1px solid",
                    borderColor: "rgb(226, 232, 240)",
                    height: "35px",
                    maxWidth: "70%",
                    children: /* @__PURE__ */ e(f, {
                      children: "When"
                    })
                  }), /* @__PURE__ */ e(k, {
                    flex: 1,
                    children: /* @__PURE__ */ e(A, {
                      style: {
                        borderRadius: G,
                        height: 35
                      },
                      options: ne,
                      onChange: F
                    })
                  })]
                })]
              }), /* @__PURE__ */ e(j, {
                in: o.event === "UPDATE",
                style: {
                  width: "100%",
                  overflow: "inherit"
                },
                children: /* @__PURE__ */ e(w, {
                  children: /* @__PURE__ */ i(z, {
                    alignItems: "center",
                    children: [/* @__PURE__ */ e(k, {
                      padding: "0.4rem",
                      paddingInline: "15px",
                      bgColor: "gray.100",
                      borderRadius: X,
                      borderLeft: "0px",
                      border: "1px solid",
                      borderColor: "rgb(226, 232, 240)",
                      height: "35px",
                      maxWidth: "70%",
                      children: /* @__PURE__ */ e(f, {
                        children: "On column"
                      })
                    }), /* @__PURE__ */ e(k, {
                      flex: 1,
                      children: /* @__PURE__ */ e(A, {
                        options: t == null ? void 0 : t.columns.map((r) => ({
                          label: r.name,
                          value: r.name
                        })),
                        style: {
                          borderRadius: G,
                          height: 35
                        },
                        value: o.destination ? {
                          label: o.destination,
                          value: o.destination
                        } : null,
                        onChange: V
                      })
                    })]
                  })
                })
              }), /* @__PURE__ */ i(w, {
                children: [/* @__PURE__ */ e(R, {
                  children: "Webhook"
                }), /* @__PURE__ */ i(P, {
                  padding: "20px",
                  paddingX: "15px",
                  backgroundColor: "#F9F9FA",
                  borderRadius: "4px",
                  spacing: 4,
                  children: [/* @__PURE__ */ i(D, {
                    children: [/* @__PURE__ */ i(U, {
                      height: "30px",
                      children: [/* @__PURE__ */ e(f, {
                        children: "URL"
                      }), /* @__PURE__ */ e(f, {
                        color: "red",
                        marginInlineStart: 1,
                        children: "*"
                      })]
                    }), /* @__PURE__ */ e(W, {
                      height: "30px",
                      type: "url",
                      value: (T = o.webhook) == null ? void 0 : T.url,
                      placeholder: "https://webhook.site/",
                      ...l.register("webhook.url")
                    })]
                  }), /* @__PURE__ */ e($, {
                    formRef: l,
                    type: "headers"
                  }), /* @__PURE__ */ i(D, {
                    children: [/* @__PURE__ */ i(U, {
                      height: "30px",
                      children: [/* @__PURE__ */ e(f, {
                        children: "Method"
                      }), /* @__PURE__ */ e(f, {
                        color: "red",
                        marginInlineStart: 1,
                        children: "*"
                      })]
                    }), /* @__PURE__ */ e(k, {
                      flex: 1,
                      children: /* @__PURE__ */ e(A, {
                        style: {
                          borderRadius: G,
                          height: 30
                        },
                        options: H.map((r) => ({
                          label: r,
                          value: r
                        })),
                        onChange: c
                      })
                    })]
                  }), /* @__PURE__ */ e(j, {
                    in: ((E = o.webhook) == null ? void 0 : E.method) !== "GET",
                    style: {
                      width: "100%",
                      overflow: "inherit"
                    },
                    children: /* @__PURE__ */ e($, {
                      formRef: l,
                      type: "body"
                    })
                  })]
                })]
              }), /* @__PURE__ */ i(B, {
                width: "100%",
                colorScheme: "blue",
                type: "submit",
                variant: "solid",
                fontSize: "16px",
                isLoading: s,
                isDisabled: S,
                children: [/* @__PURE__ */ e(J, {
                  fontSize: "22px",
                  style: {
                    marginRight: "3px"
                  }
                }), /* @__PURE__ */ e(f, {
                  paddingTop: "2px",
                  children: "Create"
                })]
              })]
            })
          })
        })]
      })]
    })
  });
}
const Q = "4px 0px 0px 4px", N = "0px 4px 4px 0px", H = ["GET", "POST", "PATCH", "PUT", "DELETE"];
function xe() {
  var y, S, c, u, m, T, E, r;
  const p = K(), t = be(), {
    setIsModify: b,
    setEventTriggerMigration: s,
    setEventTriggerError: M
  } = L.useActions(), C = L.useSelectState((a) => a.isModify), v = L.useSelectState((a) => a.eventTriggerMigration.isErrorSubmit), g = h.useMemo(() => {
    var a, x;
    return (x = (a = p.data) == null ? void 0 : a.data) == null ? void 0 : x.tables.find((oe) => oe.name === t.tableName);
  }, [(S = (y = p.data) == null ? void 0 : y.data) == null ? void 0 : S.tables, t.tableName]), n = h.useMemo(() => g == null ? void 0 : g.triggers.find((a) => a.name === t.triggerName), [g == null ? void 0 : g.triggers, t.triggerName]), l = h.useMemo(() => {
    if (n)
      return {
        table: t.tableName,
        name: (n == null ? void 0 : n.name) || "",
        event: n == null ? void 0 : n.event,
        ...(n == null ? void 0 : n.destination) && {
          destination: n == null ? void 0 : n.destination
        },
        webhook: {
          contentType: "application/json",
          method: n == null ? void 0 : n.webhook.method,
          url: n == null ? void 0 : n.webhook.url,
          headers: Object.entries((n == null ? void 0 : n.webhook.headers) || {}).map((a) => ({
            value: a,
            id: _(3)
          })),
          body: Object.entries((n == null ? void 0 : n.webhook.body) || {}).map((a) => ({
            value: a,
            id: _(3)
          }))
        }
      };
  }, [n == null ? void 0 : n.name, n == null ? void 0 : n.event, n == null ? void 0 : n.destination, n == null ? void 0 : n.webhook, t.tableName]), o = Y({
    mode: "onChange"
  });
  h.useEffect(() => {
    (l || v) && (o.reset(I.cloneDeep(l)), v && M(!1));
  }, [l, v]);
  const d = o.watch();
  h.useEffect(() => {
    s(I.cloneDeep(d));
  }, [Object.values(d)]);
  const O = h.useCallback((a) => {
    a.value === "UPDATE" ? d.destination = "" : delete d.destination, o.reset(d), o.setValue("event", a.value), !C && b(!0);
  }, [o, d, C]), F = h.useCallback((a) => {
    o.setValue("destination", a.value), !C && b(!0);
  }, [o, C]), V = h.useCallback((a) => {
    o.setValue("webhook.method", a.value), a.value === "GET" && o.setValue("webhook.body", []), !C && b(!0);
  }, [C]);
  return /* @__PURE__ */ i(P, {
    flex: 1,
    alignItems: "normal",
    height: "full",
    overflow: "auto",
    spacing: 0,
    children: [/* @__PURE__ */ e(ge, {}), /* @__PURE__ */ e(me, {
      backgroundColor: "#E5E5E5",
      height: "full",
      children: /* @__PURE__ */ e("form", {
        style: {
          backgroundColor: "white",
          padding: "50px",
          borderRadius: "4px"
        },
        children: /* @__PURE__ */ i(P, {
          spacing: 5,
          width: "60vh",
          marginBottom: "16px",
          children: [/* @__PURE__ */ i(w, {
            isRequired: !0,
            children: [/* @__PURE__ */ e(R, {
              htmlFor: "title",
              children: "Trigger name"
            }), /* @__PURE__ */ e(W, {
              id: "title",
              fontSize: "14px",
              placeholder: "Type trigger name",
              value: d.name,
              ...o.register("name", {
                onChange: () => b(!0)
              })
            }), ((c = o.formState.errors.name) == null ? void 0 : c.message) && /* @__PURE__ */ e(ee, {
              children: (u = o.formState.errors.name) == null ? void 0 : u.message
            })]
          }), /* @__PURE__ */ i(w, {
            isRequired: !0,
            children: [/* @__PURE__ */ e(R, {
              children: "Trigger Operations"
            }), /* @__PURE__ */ i(z, {
              alignItems: "center",
              children: [/* @__PURE__ */ e(k, {
                padding: "0.4rem",
                paddingInline: "15px",
                bgColor: "gray.100",
                borderRadius: Q,
                borderLeft: "0px",
                border: "1px solid",
                borderColor: "rgb(226, 232, 240)",
                height: "35px",
                maxWidth: "70%",
                children: /* @__PURE__ */ e(f, {
                  children: "When"
                })
              }), /* @__PURE__ */ e(k, {
                flex: 1,
                children: /* @__PURE__ */ e(A, {
                  style: {
                    borderRadius: N,
                    height: 35
                  },
                  options: ne,
                  onChange: O,
                  value: d.event ? {
                    label: d.event,
                    value: d.event
                  } : null
                })
              })]
            })]
          }), /* @__PURE__ */ e(j, {
            in: d.event === "UPDATE",
            style: {
              width: "100%",
              overflow: "inherit"
            },
            children: /* @__PURE__ */ e(w, {
              children: /* @__PURE__ */ i(z, {
                alignItems: "center",
                children: [/* @__PURE__ */ e(k, {
                  padding: "0.4rem",
                  paddingInline: "15px",
                  bgColor: "gray.100",
                  borderRadius: Q,
                  borderLeft: "0px",
                  border: "1px solid",
                  borderColor: "rgb(226, 232, 240)",
                  height: "35px",
                  maxWidth: "70%",
                  children: /* @__PURE__ */ e(f, {
                    children: "On column"
                  })
                }), /* @__PURE__ */ e(k, {
                  flex: 1,
                  children: /* @__PURE__ */ e(A, {
                    options: g == null ? void 0 : g.columns.map((a) => ({
                      label: a.name,
                      value: a.name
                    })),
                    style: {
                      borderRadius: N,
                      height: 35
                    },
                    value: d.destination ? {
                      label: d.destination,
                      value: d.destination
                    } : null,
                    onChange: F
                  })
                })]
              })
            })
          }), /* @__PURE__ */ i(w, {
            children: [/* @__PURE__ */ e(R, {
              children: "Webhook"
            }), /* @__PURE__ */ i(P, {
              padding: "20px",
              paddingX: "15px",
              backgroundColor: "#F9F9FA",
              borderRadius: "4px",
              spacing: 4,
              width: "full",
              children: [/* @__PURE__ */ i(D, {
                children: [/* @__PURE__ */ e(U, {
                  height: "30px",
                  children: /* @__PURE__ */ i(Z, {
                    spacing: 0.75,
                    children: [/* @__PURE__ */ e(f, {
                      children: "URL"
                    }), /* @__PURE__ */ e(f, {
                      color: "red",
                      marginInlineStart: 1,
                      children: "*"
                    })]
                  })
                }), /* @__PURE__ */ e(W, {
                  height: "30px",
                  type: "url",
                  value: (m = d.webhook) == null ? void 0 : m.url,
                  placeholder: "https://webhook.site/",
                  ...o.register("webhook.url", {
                    onChange: () => b(!0)
                  })
                })]
              }), /* @__PURE__ */ e($, {
                formRef: o,
                type: "headers"
              }), /* @__PURE__ */ i(D, {
                children: [/* @__PURE__ */ i(U, {
                  height: "30px",
                  children: [/* @__PURE__ */ e(f, {
                    children: "Method"
                  }), /* @__PURE__ */ e(f, {
                    color: "red",
                    marginInlineStart: 1,
                    children: "*"
                  })]
                }), /* @__PURE__ */ e(k, {
                  flex: 1,
                  children: /* @__PURE__ */ e(A, {
                    style: {
                      borderRadius: N,
                      height: 30
                    },
                    options: H.map((a) => ({
                      label: a,
                      value: a
                    })),
                    value: {
                      label: (T = d.webhook) == null ? void 0 : T.method,
                      value: (E = d.webhook) == null ? void 0 : E.method
                    },
                    onChange: V
                  })
                })]
              }), /* @__PURE__ */ e(j, {
                in: ((r = d.webhook) == null ? void 0 : r.method) !== "GET",
                style: {
                  width: "100%",
                  overflow: "inherit"
                },
                children: /* @__PURE__ */ e($, {
                  formRef: o,
                  type: "body"
                })
              })]
            })]
          })]
        })
      })
    })]
  });
}
const ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: xe,
  methodOptions: H
}, Symbol.toStringTag, { value: "Module" }));
export {
  ve as C,
  ke as E
};
