import { g } from './SvgIcon-BAPcdaJk.mjs';
import { useSSRContext, ref, watch, resolveComponent, mergeProps, withCtx, createVNode, openBlock, createBlock, toDisplayString, createCommentVNode, unref, Transition, Fragment, renderList, withDirectives, vModelText } from 'vue';
import { ssrRenderComponent, ssrRenderAttr, ssrInterpolate, ssrRenderList, ssrRenderClass, ssrIncludeBooleanAttr } from 'vue/server-renderer';
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue';
import { u as ef, j as Fv } from './server.mjs';

const B = { __name: "BasePhoneInput", __ssrInlineRender: true, props: { name: { type: String, required: true }, label: { type: String, required: false }, placeholder: { type: String, required: false }, value: { type: Object, required: false }, disabled: { type: Boolean, required: false }, rounded: { type: Boolean, required: false } }, emits: ["update:value"], setup(l2, { expose: B2, emit: U2 }) {
  const P = ef(), E = U2, F = l2, M = Fv(F.name), O = ref(P.countries && P.countries.length > 0 ? P.countries[0] : null), R = ref(""), z = () => {
    var e2, l3;
    const a2 = { phone_number: R.value, phone_code: O.value.phone_code, phone_limit: +O.value.max_length };
    (null == (e2 = F.value) ? undefined : e2.phone_number) === R.value && (null == (l3 = F.value) ? undefined : l3.phone_code) === O.value.phone_code || (M.setValue(a2), E("update:value", a2));
  };
  watch(() => F.value, (e2) => {
    if (e2) {
      const l3 = P.countries.find((l4) => l4.phone_code == e2.phone_code);
      (l3 && O.value.phone_code !== l3.phone_code || R.value !== e2.phone_number) && (l3 && (O.value = l3), R.value = e2.phone_number, z());
    }
  }, { deep: true, immediate: true }), watch(() => O.value, () => {
    z();
  }, { deep: true });
  return B2({ clearInput: () => {
    R.value = false;
  } }), (a2, n2, k2, q2) => {
    const B3 = resolveComponent("veeField"), U3 = g, E2 = resolveComponent("VeeErrorMessage");
    n2(ssrRenderComponent(B3, mergeProps({ name: l2.name }, q2), { default: withCtx(({ field: e2, meta: a3 }, n3, d2, u2) => {
      var k3, q3, B4, F2, M2, A;
      if (!n3) return [createVNode("div", { class: "input-phone-wrapper" }, [l2.label ? (openBlock(), createBlock("label", { key: 0, for: l2.name + "id" }, toDisplayString(l2.label), 9, ["for"])) : createCommentVNode("", true), createVNode("div", { dir: "ltr", class: "flex items-center" }, [createVNode("div", null, [createVNode(unref(Listbox), { modelValue: O.value, "onUpdate:modelValue": (e3) => O.value = e3, disabled: l2.disabled }, { default: withCtx(() => [createVNode(unref(ListboxButton), { class: [l2.disabled && "bg-[#fafafa]", l2.rounded && "!rounded-s-full"] }, { default: withCtx(() => [createVNode("div", { class: "flex items-center gap-1.5" }, [createVNode("img", { class: "h-5 w-7 object-cover", src: O.value.flag, alt: O.value.name }, null, 8, ["src", "alt"]), createVNode(U3, { name: "chevron-down" })])]), _: 1 }, 8, ["class"]), createVNode(Transition, { name: "fade" }, { default: withCtx(() => [createVNode(unref(ListboxOptions), null, { default: withCtx(() => [(openBlock(true), createBlock(Fragment, null, renderList(unref(P).countries, (e3) => (openBlock(), createBlock(unref(ListboxOption), { as: "template", key: e3.id, value: e3 }, { default: withCtx(({ active: l3, selected: a4 }) => [createVNode("li", { class: ["flex items-center gap-1", [l3 && "bg-primary bg-opacity-20", a4 && "bg-primary bg-opacity-20"]] }, [createVNode("img", { class: "h-5 w-7 object-cover", src: null == e3 ? undefined : e3.flag, alt: null == e3 ? undefined : e3.name }, null, 8, ["src", "alt"]), createVNode("span", null, "+" + toDisplayString(null == e3 ? undefined : e3.phone_code), 1)], 2)]), _: 2 }, 1032, ["value"]))), 128))]), _: 1 })]), _: 1 })]), _: 1 }, 8, ["modelValue", "onUpdate:modelValue", "disabled"])]), createVNode("div", { class: "flex-grow" }, [withDirectives(createVNode("input", { disabled: l2.disabled, "onUpdate:modelValue": (e3) => R.value = e3, type: "number", class: ["appearance-none", l2.rounded ? "!rounded-e-full" : ""], onInput: z, placeholder: l2.placeholder, id: `phoneInput_${l2.name}` }, null, 42, ["disabled", "onUpdate:modelValue", "placeholder", "id"]), [[vModelText, R.value]])])])]), +(null == (M2 = null == (F2 = R.value) ? undefined : F2.toString()) ? undefined : M2.length) != +(null == (A = O.value) ? undefined : A.max_length) ? (openBlock(), createBlock(E2, { key: 0, class: "text-sm text-red-500", name: l2.name }, null, 8, ["name"])) : createCommentVNode("", true)];
      n3(`<div class="input-phone-wrapper"${u2}>`), l2.label ? n3(`<label${ssrRenderAttr("for", l2.name + "id")}${u2}>${ssrInterpolate(l2.label)}</label>`) : n3("<!---->"), n3(`<div dir="ltr" class="flex items-center"${u2}><div${u2}>`), n3(ssrRenderComponent(unref(Listbox), { modelValue: O.value, "onUpdate:modelValue": (e3) => O.value = e3, disabled: l2.disabled }, { default: withCtx((e3, a4, n4, d3) => {
        if (!a4) return [createVNode(unref(ListboxButton), { class: [l2.disabled && "bg-[#fafafa]", l2.rounded && "!rounded-s-full"] }, { default: withCtx(() => [createVNode("div", { class: "flex items-center gap-1.5" }, [createVNode("img", { class: "h-5 w-7 object-cover", src: O.value.flag, alt: O.value.name }, null, 8, ["src", "alt"]), createVNode(U3, { name: "chevron-down" })])]), _: 1 }, 8, ["class"]), createVNode(Transition, { name: "fade" }, { default: withCtx(() => [createVNode(unref(ListboxOptions), null, { default: withCtx(() => [(openBlock(true), createBlock(Fragment, null, renderList(unref(P).countries, (e4) => (openBlock(), createBlock(unref(ListboxOption), { as: "template", key: e4.id, value: e4 }, { default: withCtx(({ active: l3, selected: a5 }) => [createVNode("li", { class: ["flex items-center gap-1", [l3 && "bg-primary bg-opacity-20", a5 && "bg-primary bg-opacity-20"]] }, [createVNode("img", { class: "h-5 w-7 object-cover", src: null == e4 ? undefined : e4.flag, alt: null == e4 ? undefined : e4.name }, null, 8, ["src", "alt"]), createVNode("span", null, "+" + toDisplayString(null == e4 ? undefined : e4.phone_code), 1)], 2)]), _: 2 }, 1032, ["value"]))), 128))]), _: 1 })]), _: 1 })];
        a4(ssrRenderComponent(unref(ListboxButton), { class: [l2.disabled && "bg-[#fafafa]", l2.rounded && "!rounded-s-full"] }, { default: withCtx((e4, l3, a5, n5) => {
          if (!l3) return [createVNode("div", { class: "flex items-center gap-1.5" }, [createVNode("img", { class: "h-5 w-7 object-cover", src: O.value.flag, alt: O.value.name }, null, 8, ["src", "alt"]), createVNode(U3, { name: "chevron-down" })])];
          l3(`<div class="flex items-center gap-1.5"${n5}><img class="h-5 w-7 object-cover"${ssrRenderAttr("src", O.value.flag)}${ssrRenderAttr("alt", O.value.name)}${n5}>`), l3(ssrRenderComponent(U3, { name: "chevron-down" }, null, a5, n5)), l3("</div>");
        }), _: 2 }, n4, d3)), a4(""), a4(ssrRenderComponent(unref(ListboxOptions), null, { default: withCtx((e4, l3, a5, n5) => {
          if (!l3) return [(openBlock(true), createBlock(Fragment, null, renderList(unref(P).countries, (e5) => (openBlock(), createBlock(unref(ListboxOption), { as: "template", key: e5.id, value: e5 }, { default: withCtx(({ active: l4, selected: a6 }) => [createVNode("li", { class: ["flex items-center gap-1", [l4 && "bg-primary bg-opacity-20", a6 && "bg-primary bg-opacity-20"]] }, [createVNode("img", { class: "h-5 w-7 object-cover", src: null == e5 ? undefined : e5.flag, alt: null == e5 ? undefined : e5.name }, null, 8, ["src", "alt"]), createVNode("span", null, "+" + toDisplayString(null == e5 ? undefined : e5.phone_code), 1)], 2)]), _: 2 }, 1032, ["value"]))), 128))];
          l3("<!--[-->"), ssrRenderList(unref(P).countries, (e5) => {
            l3(ssrRenderComponent(unref(ListboxOption), { as: "template", key: e5.id, value: e5 }, { default: withCtx(({ active: l4, selected: a6 }, n6, d4, u3) => {
              if (!n6) return [createVNode("li", { class: ["flex items-center gap-1", [l4 && "bg-primary bg-opacity-20", a6 && "bg-primary bg-opacity-20"]] }, [createVNode("img", { class: "h-5 w-7 object-cover", src: null == e5 ? undefined : e5.flag, alt: null == e5 ? undefined : e5.name }, null, 8, ["src", "alt"]), createVNode("span", null, "+" + toDisplayString(null == e5 ? undefined : e5.phone_code), 1)], 2)];
              n6(`<li class="${ssrRenderClass([[l4 && "bg-primary bg-opacity-20", a6 && "bg-primary bg-opacity-20"], "flex items-center gap-1"])}"${u3}><img class="h-5 w-7 object-cover"${ssrRenderAttr("src", null == e5 ? undefined : e5.flag)}${ssrRenderAttr("alt", null == e5 ? undefined : e5.name)}${u3}><span${u3}>+${ssrInterpolate(null == e5 ? undefined : e5.phone_code)}</span></li>`);
            }), _: 2 }, a5, n5));
          }), l3("<!--]-->");
        }), _: 2 }, n4, d3));
      }), _: 2 }, d2, u2)), n3(`</div><div class="flex-grow"${u2}><input${ssrIncludeBooleanAttr(l2.disabled) ? " disabled" : ""}${ssrRenderAttr("value", R.value)} type="number" class="${ssrRenderClass([l2.rounded ? "!rounded-e-full" : "", "appearance-none"])}"${ssrRenderAttr("placeholder", l2.placeholder)}${ssrRenderAttr("id", `phoneInput_${l2.name}`)}${u2}></div></div></div>`), +(null == (q3 = null == (k3 = R.value) ? undefined : k3.toString()) ? undefined : q3.length) != +(null == (B4 = O.value) ? undefined : B4.max_length) ? n3(ssrRenderComponent(E2, { class: "text-sm text-red-500", name: l2.name }, null, d2, u2)) : n3("<!---->");
    }), _: 1 }, k2));
  };
} }, U = B.setup;
B.setup = (e2, a2) => {
  const n2 = useSSRContext();
  return (n2.modules || (n2.modules = /* @__PURE__ */ new Set())).add("components/Inputs/BasePhoneInput.vue"), U ? U(e2, a2) : undefined;
};

export { B };
//# sourceMappingURL=BasePhoneInput-DBGCu4_x.mjs.map
