<script>
import { defineComponent, ref, onMounted, computed } from "vue";
import SidebarButton from "./SidebarButton";
import MenuLinks from "./MenuLinks";
import Mode from "./Mode";
import { useInstance } from "../helpers/composable";

export default defineComponent({
  components: {
    SidebarButton,
    MenuLinks,
    Mode,
  },

  render(h) {
    let { reset, ...restObj } = this?.$themeConfig?.menuStyle || {};

    let WBCVAppBarOptions;
    if (reset || !this.$themeConfig?.menuStyle) {
      WBCVAppBarOptions = { options: {}, ...restObj };
    } else {
      WBCVAppBarOptions = {
        options: {},
        default_0: {
          comp: "~VToolbar",
          options: {
            // class: "menubar ",
            class: " ma-15 py-15",
            props: {
              color: "#6A76AB",
              dark: !true,
              height: "auto",
              "shrink-on-scroll": true,
              prominent: true,
              src:
                "https://media.licdn.com/dms/image/sync/v2/C5103AQHobgT-QLLpXA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1567784360567?e=1757548800&v=beta&t=psqE_M5YLaUAy40kZuP7w8hsYxE3Ax6F0SXgx9dnBJU",
              "fade-img-on-scroll": true,
              "scroll-target": "#scrolling-techniques-3",
            },

            style: {
              // margin:'50px'
            },
          },
        },
        default_1: [
          "<~VContainer>",
          "<~VRow>",
          "VSpacer",
          {
            comp: MenuLinks,

            options: { class: "can-hide" },
          },
          "VSpacer",
        ],
        ...(restObj || {}),
      };
    }

    return h("WBC", { props: { item: WBCVAppBarOptions } });
  },

  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 MENUBAR_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 -
            MENUBAR_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">
$menubar-vertical-padding = 0.7rem
$menubar-horizontal-padding = 1.5rem

.menubar
  padding $menubar-vertical-padding $menubar-horizontal-padding
  line-height $menubarHeight - 1.4rem
  box-shadow var(--box-shadow)
  background var(--background-color)
  a, span, img
    display inline-block
  .logo
    height $menubarHeight - 1.4rem
    min-width $menubarHeight - 1.4rem
    margin-right 0.8rem
    vertical-align top
    border-radius 50%
  .site-name
    font-size 1.2rem
    font-weight 600
    color var(--text-color)
    position relative
  .links
    //padding-left 1.5rem
    box-sizing border-box
    white-space nowrap
    font-size 0.9rem
    position absolute
    right $menubar-horizontal-padding
    top $menubar-vertical-padding
    display flex
    background-color var(--background-color)
    .search-box
      flex: 0 0 auto
      vertical-align top

@media (max-width: $MQMobile)
  .menubar
    padding-left 4rem
    .can-hide
      display none
    .links
      padding-left .2rem
</style>
