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

export default defineComponent({
  components: { MenuLink, DropdownLink, RecoIcon, SelectLang },
  render(h) {
    return h(
      "nav",
      {
        class: "menu-links",
        directives: [{ name: "show", value: this.userLinks.length || this.repoLink }],
      },
      [
        ...this.userLinks.map((item) =>
          item.type === "links"
            ? h("div", { class: "blue menu-item" }, [
                h(DropdownLink, { props: { item } }),
              ])
            : h("div", { class: "blue menu-item" }, [h(MenuLink, { props: { item } })])
        ),
        // h("div", { class: "menu-item" }, [h(SelectLang)]),
        this.repoLink
          ? h(
              "a",
              {
                attrs: {
                  href: this.repoLink,
                  target: "_blank",
                  rel: "noopener noreferrer",
                },
                class: "repo-link green",
              },
              [
                h(RecoIcon, { props: { icon: `reco-${this.repoLabel.toLowerCase()}` } }),
                this.repoLabel,
                h("OutboundLink"),
              ]
            )
          : null,
      ]
    );
  },
  setup(props, ctx) {
    const instance = useInstance();

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

    const menu = 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 [...userMenu.value, languageDropdown];
      }

      // blogConfig 的处理，根绝配置自动添加分类和标签
      const blogConfig = instance.$themeConfig.blogConfig || {};
      const isHasCategory = userMenu.value.some((item) => {
        if (blogConfig.category) {
          return item.text === (blogConfig.category.text || "分类");
        } else {
          return true;
        }
      });
      const isHasTag = userMenu.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;
        userMenu.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;
        userMenu.value.splice(parseInt(tag.location || 3) - 1, 0, {
          link: "/tag/",
          text: tag.text || instance.$recoLocales.tag,
          type: "links",
          icon: "reco-tag",
        });
      }

      return userMenu.value;
    });

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

    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 { userMenu, menu, userLinks, repoLink, repoLabel };
  },
});
</script>

<style lang="stylus">
.menu-links
  display inline-block
  a
    line-height 1.4rem
    color var(--text-color)
    &:hover, &.router-link-active
      color $accentColor
      .iconfont
        color $accentColor
  .menu-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)
  .menu-links
    .menu-item, .repo-link
      margin-left 0

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