import { jsx as N } from "../../../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { useMemo as l, useEffect as v, useCallback as D } from "../../../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import { useWizardFormContext as P } from "../../../../../../../hooks/form/wizard/WizardFormContext.js";
import { useFetch as q } from "../../../../../../../hooks/useFetch.js";
import { VisibleField as T } from "../../../../../../internal/FormWrappers/VisibleField.js";
import k from "../../../../../../internal/FormFields/InputBase.js";
import w from "../../../../../../internal/FormWrappers/FormField.js";
import { PAYMENT_LINK_CREATION_FIELD_LENGTHS as j } from "../../../../constants.js";
import { filterDisallowedCharacters as B } from "../../../../../../internal/FormFields/utils.js";
import E from "../../../../../../../core/Context/preact/useCoreContext.js";
import { Controller as O } from "../../../../../../../hooks/form/Controller.js";
const J = () => {
  const { i18n: m, getCdnDataset: y } = E(), { control: V, fieldsConfig: h, getValues: g, setValue: c, setFieldDisplayValue: b, getDisplayValue: F, trigger: C, formState: f } = P(), s = l(() => F("telephoneNumber"), [F]), t = l(() => g("telephoneNumber"), [g]), [n, a] = l(() => {
    if (s) {
      const [r, ...e] = s.split(" ");
      return [r, e.join(" ")];
    }
    if (t) {
      const [r, ...e] = t.split(" ");
      return [r, e.join(" ")];
    }
    return [void 0, void 0];
  }, [s, t]);
  v(() => {
    if (!s && t) {
      const [r, ...e] = t.split(" "), o = e.join(" ");
      c("telephoneNumber", `${r}${o}`), b("telephoneNumber", `${r} ${o}`);
    }
  }, [s, t, c, b]);
  const i = q({
    fetchOptions: { enabled: !0 },
    queryFn: D(async () => y ? await y({
      name: "phonenumbers",
      extension: "json",
      fallback: []
    }) ?? [] : [], [y])
  }), I = l(() => (i.data ?? []).map(({ id: e, prefix: o }) => ({ id: o, name: `${e} (${o})` })).sort(({ name: e }, { name: o }) => e.localeCompare(o)), [i.data]);
  v(() => {
    n && f.touchedFields.telephoneNumber && f.errors.telephoneNumber && C("telephoneNumber");
  }, [n, a, C, f.errors, f.touchedFields]);
  const u = l(() => h.telephoneNumber?.required, [h]), $ = l(() => h.telephoneNumber?.readOnly, [h]), x = l(() => {
    const r = (i.data?.length ?? 0) > 0, e = !!s || !!t;
    return !i.isFetching && !r && !u && !e;
  }, [i.data?.length, i.isFetching, u, s, t]), L = D(() => !u && !n && !a ? { valid: !0 } : n ? a ? { valid: !0 } : { valid: !1, message: m.get("payByLink.creation.fields.phoneNumber.errors.requiredPhoneNumber") } : { valid: !1, message: m.get("payByLink.creation.fields.phoneNumber.errors.requiredPhoneCode") }, [n, a, m, u]);
  return x ? null : /* @__PURE__ */ N(T, { name: "telephoneNumber", children: /* @__PURE__ */ N(w, { label: m.get("payByLink.creation.fields.shopperPhone.label"), optional: !u, testId: "form-field-telephoneNumber", children: /* @__PURE__ */ N(
    O,
    {
      name: "telephoneNumber",
      control: V,
      rules: {
        required: u,
        validate: L
      },
      render: ({ field: r, fieldState: e }) => {
        const o = !!e.error && e.isTouched;
        return /* @__PURE__ */ N(
          k,
          {
            ...r,
            onKeyDown: (p) => {
              B({
                event: p,
                inputType: "number"
              });
            },
            onInput: (p) => {
              const d = p.target.value;
              c("telephoneNumber", `${n ?? ""}${d}`), b("telephoneNumber", `${n ?? ""} ${d}`);
            },
            value: a,
            type: "text",
            dropdown: {
              filterable: !0,
              items: I,
              value: n,
              placeholder: m.get("payByLink.creation.fields.shopperPhone.phonePrefix.placeholder"),
              readonly: i.isFetching || $
            },
            onDropdownInput: (p) => {
              const d = a || "";
              c("telephoneNumber", `${p}${d}`), b("telephoneNumber", `${p} ${d}`);
            },
            isValid: !e.error && !!r.value,
            isInvalid: o,
            errorMessage: e.error?.message,
            errorTestId: "field-error-telephoneNumber",
            maxLength: j.telephoneNumber.max,
            readonly: $
          }
        );
      }
    }
  ) }) });
};
export {
  J as ShopperPhoneField
};
