<script>
import { defineComponent, computed, toRefs } from "vue";
import { isExternal, isMailto, isTel, ensureExt } from "../helpers/utils";
import { RecoIcon } from "@vuepress-reco/core/lib/components";
import { useInstance } from "../helpers/composable";

export default defineComponent({
  components: { RecoIcon },

  props: {
    item: {
      required: true,
    },
  },

  render(h) {
    const { link, exact, isExternal, isMailto, isTel } = this;

    let WBCMenuItemObj = {
      dive: true,
      options: {
        attrs: {
          href: link,
          target:
            isMailto(link, this.$store) || isTel(link, this.$store) ? null : "_blank",
          rel:
            isMailto(link, this.$store) || isTel(link, this.$store)
              ? null
              : "noopener noreferrer",
          class: ["menu-link", "external"],
        },
        // class:
        class: ["menu-link", "mx-1", { external: isExternal(link, this.$store) }],

        to: link,
      },
      html: (that) => this.item.text,
    };

    return h("WBC", {
      key: `${this.item.text}-${this.$store.state.lg}`,
      props: { item: WBCMenuItemObj },
    });
  },
  setup(props, ctx) {
    const instance = useInstance();

    const { item } = toRefs(props);

    const link = computed(() => ensureExt(item.value.link, instance.$store));

    const exact = computed(() => {
      if (instance.$site.locales) {
        return Object.keys(instance.$site.locales).some(
          (rootLink) => rootLink === link.value
        );
      }
      return link.value === "/";
    });

    return { link, exact, isExternal, isMailto, isTel };
  },
});
</script>
