import { aX as C, aW as e, af as G, ah as P, m as M, e as f, b7 as w, V as T, ai as E, ag as A, aT as R } from "./index-6jcTChn4.js";
import { useState as c } from "react";
const u = "search", S = "url", V = (t) => {
  const { t: a } = C(), [i, l] = c(""), [x, d] = c(0), [o, b] = c(""), { isOpenDialog: k, setIsOpenDialog: I } = t, [g, y] = c(!1), [j, m] = c(""), [p, D] = c(u), v = async (n, h) => {
    if (g)
      return;
    y(!0), m("");
    const s = await fetch("/api/integrations/giphy/search", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        keyword: n,
        offset: h
      })
    }), r = await s.json();
    return s.ok ? (l(r.image || ""), d(r.nextOffset), r.image || m("No Result found")) : m((r == null ? void 0 : r.message) || "Something went wrong"), y(!1), null;
  }, O = async (n) => {
    var r;
    if (g)
      return;
    y(!0), m("");
    const h = await fetch("/api/integrations/giphy/get", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        url: n
      })
    }), s = await h.json();
    return h.ok ? (l(s.image || ""), s.image || m("No Result found")) : m((s == null ? void 0 : s.message) || ((r = s == null ? void 0 : s[0]) == null ? void 0 : r.message) || "Something went wrong"), y(!1), null;
  }, N = (n, h, s) => /* @__PURE__ */ e.jsxs(
    "div",
    {
      className: w(
        "flex cursor-pointer items-center border-b-2 p-2 text-sm ",
        p === s ? "text-default border-emphasis" : "text-subtle border-transparent"
      ),
      onClick: () => {
        b(""), l(""), D(s);
      },
      children: [
        /* @__PURE__ */ e.jsx(R, { name: n, className: "h-4 w-4 ltr:mr-2 rtl:ml-2" }),
        h
      ]
    }
  ), _ = async (n) => {
    n.stopPropagation(), n.preventDefault(), p === u ? v(o, 0) : p === S && O(o);
  };
  return /* @__PURE__ */ e.jsx(G, { open: k, onOpenChange: I, children: /* @__PURE__ */ e.jsxs(P, { children: [
    /* @__PURE__ */ e.jsx("h3", { className: "leading-16 font-cal text-emphasis text-xl", id: "modal-title", children: a("add_gif_to_confirmation") }),
    /* @__PURE__ */ e.jsx("p", { className: "text-subtle mb-3 text-sm font-light", children: a("find_gif_spice_confirmation") }),
    /* @__PURE__ */ e.jsxs("div", { className: "border-emphasis flex items-center border-b border-solid", children: [
      N("search", a("search_giphy"), u),
      N("link", a("add_link_from_giphy"), S)
    ] }),
    /* @__PURE__ */ e.jsxs(
      "form",
      {
        className: "flex w-full justify-center space-x-2 space-y-2 rtl:space-x-reverse",
        onSubmit: _,
        children: [
          /* @__PURE__ */ e.jsx("div", { className: "relative block w-full pt-2", children: /* @__PURE__ */ e.jsx(
            M,
            {
              type: "text",
              placeholder: p === u ? a("search_giphy") : "https://media.giphy.com/media/some-id/giphy.gif",
              value: o,
              onChange: (n) => {
                b(n.target.value);
              }
            }
          ) }),
          /* @__PURE__ */ e.jsx(f, { type: "submit", tabIndex: -1, color: "secondary", loading: g, children: a("search") })
        ]
      }
    ),
    i && /* @__PURE__ */ e.jsx("div", { className: "flex flex-col items-center space-x-2 space-y-2 pt-3 rtl:space-x-reverse", children: /* @__PURE__ */ e.jsx("div", { className: "bg-subtle flex w-full items-center justify-center", children: g ? /* @__PURE__ */ e.jsx("div", { className: "flex h-[200px] w-full items-center justify-center bg-gray-400 pb-3 pt-3", children: /* @__PURE__ */ e.jsxs(
      "svg",
      {
        className: w("mx-4 h-5 w-5 animate-spin", "text-inverted dark:text-emphasis"),
        xmlns: "http://www.w3.org/2000/svg",
        fill: "none",
        viewBox: "0 0 24 24",
        children: [
          /* @__PURE__ */ e.jsx(
            "circle",
            {
              className: "opacity-25",
              cx: "12",
              cy: "12",
              r: "10",
              stroke: "currentColor",
              strokeWidth: "4"
            }
          ),
          /* @__PURE__ */ e.jsx(
            "path",
            {
              className: "opacity-75",
              fill: "currentColor",
              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            }
          )
        ]
      }
    ) }) : /* @__PURE__ */ e.jsx("img", { className: "h-[200px] pb-3 pt-3", src: i, alt: `Gif from Giphy for ${o}` }) }) }),
    j && /* @__PURE__ */ e.jsx(T, { severity: "error", title: j, className: "my-4" }),
    i && p === u && /* @__PURE__ */ e.jsxs("div", { className: "mt-4 flex items-center justify-between space-x-2 rtl:space-x-reverse", children: [
      /* @__PURE__ */ e.jsx("div", { className: "text-subtle text-sm font-light", children: "Not the perfect GIF?" }),
      /* @__PURE__ */ e.jsx(
        f,
        {
          size: "sm",
          color: "secondary",
          type: "button",
          loading: g,
          onClick: () => v(o, x),
          children: "Shuffle"
        }
      )
    ] }),
    /* @__PURE__ */ e.jsxs(E, { children: [
      /* @__PURE__ */ e.jsx(
        A,
        {
          color: "minimal",
          tabIndex: -1,
          onClick: () => {
            t.setIsOpenDialog(!1);
          },
          children: a("cancel")
        }
      ),
      /* @__PURE__ */ e.jsx(
        f,
        {
          type: "button",
          disabled: !i,
          onClick: () => (t.setIsOpenDialog(!1), t.onSave(i), d(0), l(""), b(""), !1),
          children: a("add_gif")
        }
      )
    ] })
  ] }) });
};
function z(t) {
  const { t: a } = C(), [i, l] = c(t.defaultValue), [x, d] = c(!1);
  return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-start space-x-2 space-y-2 rtl:space-x-reverse", children: [
    i && /* @__PURE__ */ e.jsx("div", { className: "min-h-[200px]", children: /* @__PURE__ */ e.jsx("img", { alt: "Selected Gif Image", src: i }) }),
    /* @__PURE__ */ e.jsxs("div", { className: "flex", children: [
      i ? /* @__PURE__ */ e.jsx(
        f,
        {
          color: "minimal",
          type: "button",
          StartIcon: "pencil",
          onClick: () => d(!0),
          disabled: t.disabled,
          children: "Change"
        }
      ) : /* @__PURE__ */ e.jsx(
        f,
        {
          color: "minimal",
          type: "button",
          StartIcon: "plus",
          onClick: () => d(!0),
          disabled: t.disabled,
          children: "Add from Giphy"
        }
      ),
      i && /* @__PURE__ */ e.jsx(
        f,
        {
          color: "destructive",
          type: "button",
          StartIcon: "x",
          onClick: () => {
            l(""), t.onChange("");
          },
          disabled: t.disabled,
          children: a("remove")
        }
      )
    ] }),
    /* @__PURE__ */ e.jsx(
      V,
      {
        isOpenDialog: x,
        setIsOpenDialog: d,
        onSave: (o) => {
          l(o), t.onChange(o);
        }
      }
    )
  ] });
}
const Y = ({
  getAppData: t,
  setAppData: a,
  disabled: i
}) => {
  const l = t("thankYouPage");
  return /* @__PURE__ */ e.jsx(
    z,
    {
      defaultValue: l,
      disabled: i,
      onChange: (x) => {
        a("thankYouPage", x);
      }
    }
  );
};
export {
  Y as default
};
