import { jsx as a } from "../../../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import Y from "../../../../../../internal/FormFields/InputText.js";
import D from "../../../../../../internal/Typography/Typography.js";
import { TypographyVariant as T, TypographyElement as w } from "../../../../../../internal/Typography/types.js";
import j from "../../../../../../../hooks/useUniqueId.js";
import { logoOptions as m, logoOptionsList as z } from "./constants.js";
/* empty css               */
import { useState as d, useEffect as y, useCallback as s } from "../../../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import J from "../../../PaymentLinkSettingsContainer/context/context.js";
import { ThemeFormDataRequest as K } from "../../types.js";
import Q from "../LogoPreview/LogoPreview.js";
import X from "../LogoInput/LogoInput.js";
import { cloneFormData as L } from "../../../PaymentLinkSettingsContainer/utils/getThemePayload.js";
import Z from "../../../../../../../core/Context/preact/useCoreContext.js";
import { Icon as $ } from "../../../../../../internal/Icon/Icon.js";
const fe = ({ theme: R, initialPayload: N }) => {
  const { setPayload: r, saveActionCalled: v, setSaveActionCalled: _, setIsValid: b, isSaving: c, setIsSaveSuccess: I, setIsSaveError: O } = J(), { brandName: A, logo: G, fullWidthLogo: W } = R, [l, k] = d(A ?? void 0), [F, p] = d(G ?? null), [B, u] = d(W ?? null), [q, i] = d(), [U, h] = d(!1), g = j(), { i18n: f } = Z();
  y(() => {
    b(!!l);
  }, [l, b, q, r]), y(() => {
    i(N);
  }, [N]), y(() => {
    v && (l || h(!0), _(!1), I(!1), O(!1));
  }, [v, _, l, h, O, I]);
  const x = s(
    (e, n) => {
      i((t) => {
        const o = t ? L(t) : new FormData();
        return o.set(e, n, n.name), o.set(e, n, n.name), r(o), o;
      });
    },
    [r]
  ), E = s(
    (e) => {
      const n = e?.currentTarget?.value;
      h(!1), k(n), i((t) => {
        const o = t ? L(t) : new FormData();
        return o.set(K.BRAND, n), r(o), o;
      });
    },
    [h, k, i, r]
  ), S = s(
    (e) => {
      i((n) => {
        if (n && n.has(e)) {
          const t = L(n);
          return t.delete(e), r(t), t;
        }
        return n;
      });
    },
    [r]
  ), C = s(
    (e, n) => {
      const t = new FileReader();
      t.onload = function(o) {
        const P = o?.target?.result;
        e === m.LOGO && p(P), e === m.FULL_WIDTH_LOGO && u(P);
      }, t.readAsDataURL(n);
    },
    [p, u]
  ), H = s(
    (e, n) => {
      const t = n[0];
      t && (x(e, t), C(e, t));
    },
    [x, C]
  ), M = s(
    (e) => {
      S(e), e === m.LOGO && p(null), e === m.FULL_WIDTH_LOGO && u(null);
    },
    [S, p, u]
  ), V = s(
    (e) => e === m.LOGO ? F : B,
    [B, F]
  );
  return /* @__PURE__ */ a("div", { className: "adyen-pe-payment-link-theme-form-container", children: /* @__PURE__ */ a("div", { className: "adyen-pe-payment-link-theme-form", children: [
    /* @__PURE__ */ a("div", { className: "adyen-pe-payment-link-settings__input-container", children: [
      /* @__PURE__ */ a("label", { htmlFor: g, "aria-labelledby": g, className: "adyen-pe-payment-link-theme-form__brand-input", children: /* @__PURE__ */ a(D, { el: w.SPAN, variant: T.BODY, stronger: !0, children: f.get("payByLink.settings.theme.brandName.input.label") }) }),
      /* @__PURE__ */ a(
        Y,
        {
          type: "text",
          disabled: !!c,
          readonly: !!c,
          lang: f.locale,
          uniqueId: g,
          value: l,
          onInput: E,
          placeholder: f.get("payByLink.settings.theme.brandName.input.placeholder"),
          isInvalid: U
        }
      ),
      U && /* @__PURE__ */ a("div", { className: "adyen-pe-payment-link-theme-form__error", children: [
        /* @__PURE__ */ a($, { name: "cross-circle-fill", className: "adyen-pe-payment-link-theme-form__error-icon" }),
        /* @__PURE__ */ a(
          D,
          {
            className: "adyen-pe-payment-link-theme-form__error-text",
            el: w.SPAN,
            variant: T.BODY,
            children: f.get("payByLink.settings.theme.inputs.brandName.errors.missing")
          }
        )
      ] })
    ] }),
    z.map((e) => {
      const n = V(e);
      return /* @__PURE__ */ a("div", { className: "adyen-pe-payment-link-settings__input-container ", children: n ? /* @__PURE__ */ a(Q, { disabled: !!c, logoType: e, logoURL: n, onRemoveLogo: M }) : /* @__PURE__ */ a(X, { disabled: !!c, logoType: e, onFileInputChange: H }) }, e);
    })
  ] }) });
};
export {
  fe as ThemeForm
};
