<script>
import { defineComponent, ref, onMounted, computed } from "vue";
import AlgoliaSearchBox from "@AlgoliaSearchBox";
import SearchBox from "@SearchBox";
import SidebarButton from "./SidebarButton";
import NavLinks from "./NavLinks";
import MenuBar from "./MenuBar";
import Mode from "./Mode";
import { useInstance } from "../helpers/composable";
// NEW: Import the SelectLang component
import SelectLang from "./SelectLang.vue"; // Assuming SelectLang.vue is in the same directory

export default defineComponent({
  components: {
    SidebarButton,
    NavLinks,
    SearchBox,
    AlgoliaSearchBox,
    Mode,
    // SelectLang, // NEW: Register the SelectLang component
  },

  render(h) {
    let { reset, ...restObj } = this?.$themeConfig?.navBarStyle || {};
    let WBCNavBarObj;
    if (reset || !this?.$themeConfig?.navBarStyle) {
      WBCNavBarObj = { options: {}, ...restObj };
    } else {
      WBCNavBarObj = {
        options: {},
        // default_: "<~VRow>",

        default_0: {
          comp: "~VRow",
          // header:'Logo Sample',
          options: {
            disposition: "nested ",
            class: "blue navbar ",
            props: {
              absolute: true,
              // color: "#6A76AB",
              color: "grey",
              dark: !true,
              height: 200,
              "shrink-on-scroll": true,
              prominent: true,
              src:
                "https://plus.unsplash.com/premium_photo-1754058375468-5c14d55031a0?q=80&w=725&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
              "fade-img-on-scroll": true,
              "scroll-target": "#scrolling-techniques-3",
            },
          },
        },
        // default_0_: "<~VRow>",
        // default_00: "<VRow>",

        default_1: this.$themeConfig.logo
          ? {
              comp: "img",
              options: {
                // class: "home-link" ,
                class: " logo",
                attrs: {
                  src: this.$withBase(this.$themeConfig.logo),
                  alt: this.$siteTitle,
                },
                to: this.$localePath,
              },
              footer: this.$siteTitle
                ? {
                    comp: "span",
                    options: {
                      ref: "siteName",
                      class: "site-name",
                      html: this.$siteTitle,
                    },
                  }
                : null,
            }
          : null,
        // default_0000: "VSpacer",
        default_10: "VSpacer",

        default_2: [
          { comp: Mode, options: { wrap: "span" } },
          this.isAlgoliaSearch
            ? {
                comp: "AlgoliaSearchBox",
                options: { props: { options: this.algolia } },
              }
            : this.$themeConfig.search !== false && this.$frontmatter.search !== false
            ? { comp: SearchBox, options: {} }
            : null,
        ],
        default_20: "VSpacer",
        default_3: { comp: SelectLang, options: {} },

        // default_7:"<VRow>",

        // default_8:[
        //   "<VRow,yellow pa-15>",
        //   "VSpacer",
        //   {
        //     comp: NavLinks,

        //     options: { class: "links ma-15  can-hide" },
        //   }
        // ],
        ...(restObj || {}),
      };
    }

    let WBCSubNavBarObj = {
      options: {
        // class:'mx-10',
        class: "container pa-15 ma-15",
        style: {
          position: "relative",
          "z-index": 1,
        },
      },
      0: { comp: "~VRow", options: {} },
      1: "VSpacer",
      2: "<VRow>",

      3: {
        comp: NavLinks,

        options: { class: "links  can-hide" },
      },
    };
    // ];

    // return h("WBC", { props: { item: WBCMenuObj } });
    return h("WBC", {
      props: { item: [WBCNavBarObj, WBCSubNavBarObj] },
    });
  },

  setup(props, ctx) {
    const instance = useInstance();
    const linksWrapMaxWidth = ref(null);

    const algolia = computed(() => {
      return instance.$themeLocaleConfig.algolia || instance.$themeConfig.algolia || {};
    });

    const isAlgoliaSearch = computed(() => {
      return algolia.value && algolia.value.apiKey && algolia.value.indexName;
    });

    function css(el, property) {
      // NOTE: Known bug, will return 'auto' if style value is 'auto'
      const win = el.ownerDocument.defaultView;
      // null means not to return pseudo styles
      return win.getComputedStyle(el, null)[property];
    }

    onMounted(() => {
      const MOBILE_DESKTOP_BREAKPOINT = 719; // refer to config.styl
      const NAVBAR_VERTICAL_PADDING =
        parseInt(css(instance.$el, "paddingLeft")) +
        parseInt(css(instance.$el, "paddingRight"));

      const handleLinksWrapWidth = () => {
        if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
          linksWrapMaxWidth.value = null;
        } else {
          linksWrapMaxWidth.value =
            instance.$el.offsetWidth -
            NAVBAR_VERTICAL_PADDING -
            ((instance.$refs.siteName && instance.$refs.siteName.offsetWidth) || 0);
        }
      };

      handleLinksWrapWidth();
      window.addEventListener("resize", handleLinksWrapWidth, false);
    });

    return { linksWrapMaxWidth, algolia, isAlgoliaSearch, css };
  },
});
</script>

<style lang="stylus">
.logo
  height $navbarHeight - 1.4rem
  min-width $navbarHeight - 1.4rem
  margin-right 0.8rem
  vertical-align top
  border-radius 50%
</style>
