import { _ as _sfc_main$3, a as _sfc_main$1, b as _sfc_main$2, c as _sfc_main$2$1 } from './TabsTrigger-Dzpk3vN1.mjs';
import { a as _export_sfc, d as useI18n, _ as __nuxt_component_0$1 } from './server.mjs';
import { a as __nuxt_component_4, _ as __nuxt_component_5 } from './ArrowLeftIcon-Dfw2cv7V.mjs';
import _sfc_main$4 from './EmptyState-CWK2sm1Q.mjs';
import { defineComponent, ref, watch, nextTick, computed, mergeProps, withCtx, unref, createVNode, toDisplayString, createBlock, openBlock, Fragment, renderList, resolveDynamicComponent, Transition, createCommentVNode, useSSRContext } from 'vue';
import { ssrRenderComponent, ssrRenderList, ssrInterpolate, ssrRenderClass, ssrRenderVNode, ssrRenderAttrs } from 'vue/server-renderer';
import { e as useWindowSize, f as useScroll } from './index-Cce4iXMN.mjs';
import { g as useDebounceFn } from './index-B_IDLhd1.mjs';
import 'reka-ui';
import './utils-H80jjgLf.mjs';
import 'clsx';
import 'tailwind-merge';
import '../_/nitro.mjs';
import 'node:http';
import 'node:https';
import 'node:events';
import 'node:buffer';
import 'nitropack/dist/runtime/plugin';
import 'packrup';
import 'consola';
import 'node:fs';
import 'node:url';
import '@iconify/utils';
import 'node:crypto';
import 'ipx';
import 'node:path';
import 'pinia';
import '@pinia/colada';
import 'vue-router';
import '@unhead/schema-org/vue';
import 'deep-pick-omit';
import '@iconify/vue';
import '../routes/renderer.mjs';
import 'vue-bundle-renderer/runtime';
import 'unhead/server';
import 'devalue';
import 'unhead/plugins';
import 'unhead/utils';

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "HorizontalTabsWithContent",
  __ssrInlineRender: true,
  props: {
    tabsData: {},
    description: { type: Boolean, default: false },
    centeredContent: { type: Boolean, default: true }
  },
  setup(__props) {
    const { locale } = useI18n();
    const tabsListRef = ref();
    const tabsArrivedState = ref({
      top: true,
      bottom: true,
      left: true,
      right: true
    });
    let scrollWatcherCleanup = null;
    const { width } = useWindowSize();
    const initializeScrollWatcher = () => {
      if (scrollWatcherCleanup) {
        scrollWatcherCleanup();
        scrollWatcherCleanup = null;
      }
      if (tabsListRef.value) {
        const scrollElement = getScrollElement(tabsListRef.value);
        if (scrollElement) {
          try {
            const { arrivedState: tabsScroll } = useScroll(scrollElement, {
              offset: { top: 10, bottom: 10, left: 10, right: 10 }
            });
            const stopWatcher = watch(
              tabsScroll,
              (newState) => {
                tabsArrivedState.value = newState;
              },
              { immediate: true }
            );
            scrollWatcherCleanup = stopWatcher;
          } catch (error) {
            console.warn("Failed to initialize tabs scroll watcher:", error);
          }
        }
      }
    };
    const debouncedInitializeScrollWatcher = useDebounceFn(() => {
      initializeScrollWatcher();
    }, 150);
    watch(width, () => {
      nextTick(() => {
        debouncedInitializeScrollWatcher();
      });
    });
    const getScrollElement = (ref2) => {
      if (!ref2) return null;
      if (typeof ref2 === "object" && "$el" in ref2 && ref2.$el instanceof HTMLElement) {
        return ref2.$el;
      }
      if (ref2 instanceof HTMLElement) {
        return ref2;
      }
      return null;
    };
    const tabsScrollClasses = computed(() => {
      const canScrollLeft = !tabsArrivedState.value.left;
      const canScrollRight = !tabsArrivedState.value.right;
      const isRTL = locale.value === "ar";
      if (isRTL) {
        return {
          "scroll-fade-left-rtl": canScrollLeft,
          "scroll-fade-right-rtl": canScrollRight,
          "scroll-fade-both-horizontal-rtl": canScrollLeft && canScrollRight
        };
      } else {
        return {
          "scroll-fade-left": canScrollLeft,
          "scroll-fade-right": canScrollRight,
          "scroll-fade-both-horizontal": canScrollLeft && canScrollRight
        };
      }
    });
    const scrollTabs = (direction) => {
      if (!tabsListRef.value) return;
      const scrollElement = getScrollElement(tabsListRef.value);
      if (!scrollElement || typeof scrollElement.scrollBy !== "function") {
        console.warn("Invalid scroll element for tabs");
        return;
      }
      const scrollAmount = 200;
      try {
        if (direction === "left") {
          scrollElement.scrollBy({ left: -scrollAmount, behavior: "smooth" });
        } else if (direction === "right") {
          scrollElement.scrollBy({ left: scrollAmount, behavior: "smooth" });
        }
      } catch (error) {
        console.warn("Failed to scroll tabs:", error);
      }
    };
    return (_ctx, _push, _parent, _attrs) => {
      const _component_Tabs = _sfc_main$3;
      const _component_ClientOnly = __nuxt_component_0$1;
      const _component_SvgArrowLeftIcon = __nuxt_component_4;
      const _component_SvgArrowRightIcon = __nuxt_component_5;
      const _component_TabsList = _sfc_main$1;
      const _component_TabsTrigger = _sfc_main$2;
      const _component_TabsContent = _sfc_main$2$1;
      const _component_EmptyState = _sfc_main$4;
      if (_ctx.tabsData && _ctx.tabsData.length > 0) {
        _push(ssrRenderComponent(_component_Tabs, mergeProps({
          orientation: "horizontal",
          "default-value": _ctx.tabsData[0].value,
          class: "w-full"
        }, _attrs), {
          default: withCtx((_, _push2, _parent2, _scopeId) => {
            if (_push2) {
              _push2(`<div class="flex flex-col gap-6" data-v-43e8a02c${_scopeId}>`);
              if (_ctx.tabsData.length > 1) {
                _push2(`<div class="flex w-full justify-center" data-v-43e8a02c${_scopeId}><div class="relative container mx-auto flex justify-center px-4" data-v-43e8a02c${_scopeId}>`);
                _push2(ssrRenderComponent(_component_ClientOnly, null, {}, _parent2, _scopeId));
                _push2(ssrRenderComponent(_component_TabsList, {
                  ref_key: "tabsListRef",
                  ref: tabsListRef,
                  dir: unref(locale) === "ar" ? "rtl" : "ltr",
                  class: ["rounded-ws-rounded ws-no-scrollbar tabs-gradient-border flex h-auto w-fit max-w-full flex-row justify-start gap-[4px] overflow-x-auto overflow-y-visible p-0", unref(tabsScrollClasses)]
                }, {
                  default: withCtx((_2, _push3, _parent3, _scopeId2) => {
                    if (_push3) {
                      _push3(`<!--[-->`);
                      ssrRenderList(_ctx.tabsData, (tab) => {
                        _push3(ssrRenderComponent(_component_TabsTrigger, {
                          key: tab.value,
                          value: tab.value,
                          gradient: true,
                          class: "rounded-ws-rounded min-h-[48px] w-auto flex-shrink-0 flex-grow-0 cursor-pointer border-transparent bg-transparent px-10 transition-all duration-300"
                        }, {
                          default: withCtx((_3, _push4, _parent4, _scopeId3) => {
                            if (_push4) {
                              _push4(`<div class="text-center" data-v-43e8a02c${_scopeId3}><span class="text-base leading-6 font-medium whitespace-nowrap" data-v-43e8a02c${_scopeId3}>${ssrInterpolate(tab.title)}</span></div>`);
                            } else {
                              return [
                                createVNode("div", { class: "text-center" }, [
                                  createVNode("span", { class: "text-base leading-6 font-medium whitespace-nowrap" }, toDisplayString(tab.title), 1)
                                ])
                              ];
                            }
                          }),
                          _: 2
                        }, _parent3, _scopeId2));
                      });
                      _push3(`<!--]-->`);
                    } else {
                      return [
                        (openBlock(true), createBlock(Fragment, null, renderList(_ctx.tabsData, (tab) => {
                          return openBlock(), createBlock(_component_TabsTrigger, {
                            key: tab.value,
                            value: tab.value,
                            gradient: true,
                            class: "rounded-ws-rounded min-h-[48px] w-auto flex-shrink-0 flex-grow-0 cursor-pointer border-transparent bg-transparent px-10 transition-all duration-300"
                          }, {
                            default: withCtx(() => [
                              createVNode("div", { class: "text-center" }, [
                                createVNode("span", { class: "text-base leading-6 font-medium whitespace-nowrap" }, toDisplayString(tab.title), 1)
                              ])
                            ]),
                            _: 2
                          }, 1032, ["value"]);
                        }), 128))
                      ];
                    }
                  }),
                  _: 1
                }, _parent2, _scopeId));
                _push2(`</div></div>`);
              } else {
                _push2(`<!---->`);
              }
              if (_ctx.description) {
                _push2(`<div class="container mx-auto flex justify-center px-4" data-v-43e8a02c${_scopeId}><p class="dark-text-gradient mx-auto text-center text-[1.125rem] md:w-[712px]" data-v-43e8a02c${_scopeId}>${ssrInterpolate(_ctx.$t("projectStages.description"))}</p></div>`);
              } else {
                _push2(`<!---->`);
              }
              _push2(`<div class="${ssrRenderClass([_ctx.centeredContent ? "container mx-auto px-4" : "", "w-full"])}" data-v-43e8a02c${_scopeId}><!--[-->`);
              ssrRenderList(_ctx.tabsData, (tab) => {
                _push2(ssrRenderComponent(_component_TabsContent, {
                  key: tab.value,
                  value: tab.value,
                  dir: unref(locale) === "ar" ? "rtl" : "ltr"
                }, {
                  default: withCtx((_2, _push3, _parent3, _scopeId2) => {
                    if (_push3) {
                      _push3(`<template>`);
                      ssrRenderVNode(_push3, createVNode(resolveDynamicComponent(tab.component), mergeProps({
                        key: tab.value
                      }, { ref_for: true }, tab.props || {}), null), _parent3, _scopeId2);
                      _push3(`</template>`);
                    } else {
                      return [
                        createVNode(Transition, {
                          name: "tab-content",
                          mode: "out-in",
                          appear: ""
                        }, {
                          default: withCtx(() => [
                            (openBlock(), createBlock(resolveDynamicComponent(tab.component), mergeProps({
                              key: tab.value
                            }, { ref_for: true }, tab.props || {}), null, 16))
                          ]),
                          _: 2
                        }, 1024)
                      ];
                    }
                  }),
                  _: 2
                }, _parent2, _scopeId));
              });
              _push2(`<!--]--></div></div>`);
            } else {
              return [
                createVNode("div", { class: "flex flex-col gap-6" }, [
                  _ctx.tabsData.length > 1 ? (openBlock(), createBlock("div", {
                    key: 0,
                    class: "flex w-full justify-center"
                  }, [
                    createVNode("div", { class: "relative container mx-auto flex justify-center px-4" }, [
                      createVNode(_component_ClientOnly, null, {
                        default: withCtx(() => [
                          createVNode("div", { class: "pointer-events-none absolute inset-0 z-10" }, [
                            !unref(tabsArrivedState).left ? (openBlock(), createBlock("div", {
                              key: 0,
                              class: ["bg-surface-background hover:bg-surface-background/90 border-surface-border pointer-events-auto absolute top-1/2 -translate-y-1/2 transform animate-pulse cursor-pointer rounded-full border p-2 shadow-lg backdrop-blur-sm transition-colors hover:shadow-xl", unref(locale) === "ar" ? "right-2" : "left-2"],
                              onClick: ($event) => scrollTabs(unref(locale) === "ar" ? "right" : "left")
                            }, [
                              unref(locale) !== "ar" ? (openBlock(), createBlock(_component_SvgArrowLeftIcon, {
                                key: 0,
                                class: "text-foreground"
                              })) : (openBlock(), createBlock(_component_SvgArrowRightIcon, {
                                key: 1,
                                class: "text-foreground"
                              }))
                            ], 10, ["onClick"])) : createCommentVNode("", true),
                            !unref(tabsArrivedState).right ? (openBlock(), createBlock("div", {
                              key: 1,
                              class: ["bg-surface-background hover:bg-surface-background/90 border-surface-border pointer-events-auto absolute top-1/2 -translate-y-1/2 transform animate-pulse cursor-pointer rounded-full border p-2 shadow-lg backdrop-blur-sm transition-colors hover:shadow-xl", unref(locale) === "ar" ? "left-2" : "right-2"],
                              onClick: ($event) => scrollTabs(unref(locale) === "ar" ? "left" : "right")
                            }, [
                              unref(locale) !== "ar" ? (openBlock(), createBlock(_component_SvgArrowRightIcon, {
                                key: 0,
                                class: "text-foreground"
                              })) : (openBlock(), createBlock(_component_SvgArrowLeftIcon, {
                                key: 1,
                                class: "text-foreground"
                              }))
                            ], 10, ["onClick"])) : createCommentVNode("", true)
                          ])
                        ]),
                        _: 1
                      }),
                      createVNode(_component_TabsList, {
                        ref_key: "tabsListRef",
                        ref: tabsListRef,
                        dir: unref(locale) === "ar" ? "rtl" : "ltr",
                        class: ["rounded-ws-rounded ws-no-scrollbar tabs-gradient-border flex h-auto w-fit max-w-full flex-row justify-start gap-[4px] overflow-x-auto overflow-y-visible p-0", unref(tabsScrollClasses)]
                      }, {
                        default: withCtx(() => [
                          (openBlock(true), createBlock(Fragment, null, renderList(_ctx.tabsData, (tab) => {
                            return openBlock(), createBlock(_component_TabsTrigger, {
                              key: tab.value,
                              value: tab.value,
                              gradient: true,
                              class: "rounded-ws-rounded min-h-[48px] w-auto flex-shrink-0 flex-grow-0 cursor-pointer border-transparent bg-transparent px-10 transition-all duration-300"
                            }, {
                              default: withCtx(() => [
                                createVNode("div", { class: "text-center" }, [
                                  createVNode("span", { class: "text-base leading-6 font-medium whitespace-nowrap" }, toDisplayString(tab.title), 1)
                                ])
                              ]),
                              _: 2
                            }, 1032, ["value"]);
                          }), 128))
                        ]),
                        _: 1
                      }, 8, ["dir", "class"])
                    ])
                  ])) : createCommentVNode("", true),
                  _ctx.description ? (openBlock(), createBlock("div", {
                    key: 1,
                    class: "container mx-auto flex justify-center px-4"
                  }, [
                    createVNode("p", { class: "dark-text-gradient mx-auto text-center text-[1.125rem] md:w-[712px]" }, toDisplayString(_ctx.$t("projectStages.description")), 1)
                  ])) : createCommentVNode("", true),
                  createVNode("div", {
                    class: [_ctx.centeredContent ? "container mx-auto px-4" : "", "w-full"]
                  }, [
                    (openBlock(true), createBlock(Fragment, null, renderList(_ctx.tabsData, (tab) => {
                      return openBlock(), createBlock(_component_TabsContent, {
                        key: tab.value,
                        value: tab.value,
                        dir: unref(locale) === "ar" ? "rtl" : "ltr"
                      }, {
                        default: withCtx(() => [
                          createVNode(Transition, {
                            name: "tab-content",
                            mode: "out-in",
                            appear: ""
                          }, {
                            default: withCtx(() => [
                              (openBlock(), createBlock(resolveDynamicComponent(tab.component), mergeProps({
                                key: tab.value
                              }, { ref_for: true }, tab.props || {}), null, 16))
                            ]),
                            _: 2
                          }, 1024)
                        ]),
                        _: 2
                      }, 1032, ["value", "dir"]);
                    }), 128))
                  ], 2)
                ])
              ];
            }
          }),
          _: 1
        }, _parent));
      } else {
        _push(`<div${ssrRenderAttrs(mergeProps({ class: "w-full text-center" }, _attrs))} data-v-43e8a02c>`);
        _push(ssrRenderComponent(_component_EmptyState, {
          size: "100%",
          "custom-message": _ctx.$t("emptyState")
        }, null, _parent));
        _push(`</div>`);
      }
    };
  }
});
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/global/HorizontalTabsWithContent.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const __nuxt_component_1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-43e8a02c"]]);

export { __nuxt_component_1 as default };
//# sourceMappingURL=HorizontalTabsWithContent-BjNCIRTE.mjs.map
