<script>
import { defineComponent, computed } from "vue";
import { RecoIcon } from "@vuepress-reco/core/lib/components";
import { resolveNavLinkItem } from "../helpers/utils";
import NavLink from "./NavLink";
import { useInstance } from "../helpers/composable";
import SelectLang from "./SelectLang.vue"; // Assuming SelectLang.vue is in the same directory

export default defineComponent({
  components: { NavLink, /* DropdownLink, RecoIcon, */ SelectLang },
  render(h) {
    let { reset, ...restMenuObj } = this?.$themeConfig?.navMenuStyle || {};

    let WBCNavMenuObj = {
      default_item: {},
    };

    if (reset) {
      WBCNavMenuObj = { default_item: {} };
    }

    if (this?.$themeConfig?.navMenuItemsStyle?.reset) {
      WBCNavMenuObj["default_item"] = {};
    } else {
      WBCNavMenuObj["default_item"] = {
        default_0: "<~VTabs,nav-links>",
        default_1: "<VTab,blue ma-1 >",
      };
      this.userLinks.forEach((item, i) => {
        WBCNavMenuObj[`default_item`][`item_${i}`] = {
          comp: NavLink,
          options: { props: { item } },
        };
      });
    }

    WBCNavMenuObj[`default_item`] = {
      ...WBCNavMenuObj[`default_item`],
      ...(this?.$themeConfig?.navMenuItemsStyle || {}),
    };

    delete WBCNavMenuObj[`default_item`].reset;

    {
      WBCNavMenuObj = {
        ...WBCNavMenuObj,
        ...(restMenuObj || {}),
      };
    }
    return h("WBC", { props: { item: WBCNavMenuObj } });
  },
  setup(props, ctx) {
    const instance = useInstance();

    const userNav = computed(() => {
      return instance.$themeLocaleConfig.nav || instance.$themeConfig.nav || [];
    });

    const nav = computed(() => {
      const locales = instance.$site.locales || {};

      if (locales && Object.keys(locales).length > 1) {
        const currentLink = instance.$page.path;
        const routes = instance.$router.options.routes;
        const themeLocales = instance.$themeConfig.locales || {};
        const languageDropdown = {
          text: instance.$themeLocaleConfig.selectText || "Languages",
          items: Object.keys(locales).map((path) => {
            const locale = locales[path];
            const text = (themeLocales[path] && themeLocales[path].label) || locale.lang;
            let link;
            // Stay on the current page
            if (locale.lang === instance.$lang) {
              link = currentLink;
            } else {
              // Try to stay on the same page
              link = currentLink.replace(instance.$localeConfig.path, path);
              // fallback to homepage
              if (!routes.some((route) => route.path === link)) {
                link = path;
              }
            }
            return { text, link };
          }),
        };

        return [...userNav.value, languageDropdown];
      }

      // blogConfig 的处理，根绝配置自动添加分类和标签
      const blogConfig = instance.$themeConfig.blogConfig || {};
      const isHasCategory = userNav.value.some((item) => {
        if (blogConfig.category) {
          return item.text === (blogConfig.category.text || "分类");
        } else {
          return true;
        }
      });
      const isHasTag = userNav.value.some((item) => {
        if (blogConfig.tag) {
          return item.text === (blogConfig.tag.text || "标签");
        } else {
          return true;
        }
      });

      if (!isHasCategory && Object.hasOwnProperty.call(blogConfig, "category")) {
        const category = blogConfig.category;
        const $categories = instance.$categories;
        userNav.value.splice(parseInt(category.location || 2) - 1, 0, {
          items: $categories.list.map((item) => {
            item.link = item.path;
            item.text = item.name;
            return item;
          }),
          text: category.text || instance.$recoLocales.category,
          type: "links",
          icon: "reco-category",
        });
      }

      if (!isHasTag && Object.hasOwnProperty.call(blogConfig, "tag")) {
        const tag = blogConfig.tag;
        userNav.value.splice(parseInt(tag.location || 3) - 1, 0, {
          link: "/tag/",
          text: tag.text || instance.$recoLocales.tag,
          type: "links",
          icon: "reco-tag",
        });
      }

      return userNav.value;
    });

    const userLinks = computed(() => {
      return (instance.nav || []).map((link) => {
        return Object.assign(resolveNavLinkItem(link), {
          items: (link.items || []).map(resolveNavLinkItem),
        });
      });
    });

    const repoLink = computed(() => {
      const { repo } = instance.$themeConfig;

      if (repo) {
        return /^https?:/.test(repo) ? repo : `https://github.com/${repo}`;
      }

      return "";
    });

    const repoLabel = computed(() => {
      if (!instance.repoLink) return "";
      if (instance.$themeConfig.repoLabel) {
        return instance.$themeConfig.repoLabel;
      }

      const repoHost = instance.repoLink.match(/^https?:\/\/[^/]+/)[0];
      const platforms = ["GitHub", "GitLab", "Bitbucket"];
      for (let i = 0; i < platforms.length; i++) {
        const platform = platforms[i];
        if (new RegExp(platform, "i").test(repoHost)) {
          return platform;
        }
      }

      return "Source";
    });

    return { userNav, nav, userLinks, repoLink, repoLabel };
  },
});
</script>

<style lang="stylus">
.nav-links
  display inline-block
  a
    line-height 1.4rem
    color var(--text-color)
    &:hover, &.router-link-active
      color $accentColor
      .iconfont
        color $accentColor
  .nav-item
    position relative
    display inline-block
    margin-left 1.5rem
    line-height 2rem
    &:first-child
      margin-left 0
  .repo-link
    margin-left 1.5rem

@media (max-width: $MQMobile)
  .nav-links
    .nav-item, .repo-link
      margin-left 0

@media (min-width: $MQMobile)
  .nav-item > a:not(.external)
    &:hover, &.router-link-active
      margin-bottom -2px
</style>
