import { ref, watch, createElementBlock, createCommentVNode, openBlock, createElementVNode, Fragment, renderList, withModifiers, normalizeClass, createTextVNode, toDisplayString } from "vue";
/* empty css                    */
import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.mjs";
const _hoisted_1 = { class: "fec-form-links" };
const _hoisted_2 = ["href", "onClick"];
const _hoisted_3 = { class: "fec-form-link-content" };
const _hoisted_4 = {
  key: 0,
  class: "tab-count"
};
const _sfc_main = {
  __name: "FormAnchorNav",
  props: {
    links: {
      type: Array,
      default: () => []
    },
    modelValue: {
      type: [String, Number],
      default: ""
    },
    fecFormRef: {
      type: Object
    }
  },
  emits: ["change", "update:modelValue"],
  setup(__props, { emit: __emit }) {
    var _a;
    const props = __props;
    const formAnchorRef = ref();
    const emit = __emit;
    watch(
      () => props.links,
      (newLinks) => {
        if (newLinks.length && !props.modelValue) {
          emit("update:modelValue", newLinks[0].id);
        }
      },
      { immediate: true }
    );
    let isClickScrolling = false;
    function handleClick(e, link) {
      var _a2;
      e.preventDefault();
      emit("update:modelValue", link.id);
      emit("change", link);
      const fecForm = (_a2 = formAnchorRef.value) == null ? void 0 : _a2.closest(".fec-form");
      const element = fecForm == null ? void 0 : fecForm.querySelector(`#comp_${link.id}`);
      if (element) {
        isClickScrolling = true;
        element.scrollIntoView({ behavior: "smooth", block: "start" });
        waitScrollEnd(() => {
          isClickScrolling = false;
        });
      }
    }
    const scrollWrap = (_a = props.fecFormRef) == null ? void 0 : _a.$el.querySelector(".el-scrollbar__wrap");
    scrollWrap == null ? void 0 : scrollWrap.addEventListener("scroll", onScroll);
    function waitScrollEnd(callback) {
      let timer = null;
      if (!scrollWrap) return;
      const handler = () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          scrollWrap.removeEventListener("scroll", handler);
          callback();
        }, 150);
      };
      scrollWrap.addEventListener("scroll", handler);
    }
    function onScroll() {
      if (isClickScrolling) return;
      const top = scrollWrap.scrollTop;
      let current = null;
      for (const item of props.links) {
        const el = document.getElementById(String(item.id));
        if (!el) continue;
        if (el.offsetTop <= top) current = item;
      }
      if (current) {
        emit("update:modelValue", current.id);
      }
    }
    return (_ctx, _cache) => {
      return __props.links.length ? (openBlock(), createElementBlock("div", {
        key: 0,
        class: "fec-form-nav",
        ref_key: "formAnchorRef",
        ref: formAnchorRef
      }, [
        createElementVNode("div", _hoisted_1, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.links, (link) => {
            return openBlock(), createElementBlock("a", {
              key: link.id,
              href: `#${link.id}`,
              class: normalizeClass(["fec-form-link-item", { "is-active": __props.modelValue == link.id }]),
              onClick: withModifiers(($event) => handleClick($event, link), ["prevent"])
            }, [
              createElementVNode("span", _hoisted_3, [
                createTextVNode(toDisplayString(link.title) + " ", 1),
                link.count ? (openBlock(), createElementBlock("span", _hoisted_4, "(" + toDisplayString(link.count) + ")", 1)) : createCommentVNode("", true)
              ])
            ], 10, _hoisted_2);
          }), 128))
        ])
      ], 512)) : createCommentVNode("", true);
    };
  }
};
const FormAnchorNav = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1a0c9e5c"]]);
export {
  FormAnchorNav as default
};
