<template>
  <nav :class="ui.wrapper">
    <ULinkCustom
      v-for="(link, index) of links"
      v-slot="{ isActive }"
      :key="index"
      v-bind="omit(link, ['label', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
      :class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
      :active-class="ui.active"
      :inactive-class="ui.inactive"
      @click="link.click"
      @keyup.enter="$event.target.blur()"
    >
      <slot name="avatar" :link="link">
        <UAvatar
          v-if="link.avatar"
          v-bind="{ size: ui.avatar.size, ...link.avatar }"
          :class="[ui.avatar.base]"
        />
      </slot>
      <slot name="icon" :link="link" :is-active="isActive">
        <UIcon
          v-if="link.icon"
          :name="link.icon"
          :class="[ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive, link.iconClass]"
        />
      </slot>
      <slot :link="link">
        <span v-if="link.label" :class="ui.label">{{ link.label }}</span>
      </slot>
      <slot name="badge" :link="link" :is-active="isActive">
        <span v-if="link.badge" :class="[ui.badge.base, isActive ? ui.badge.active : ui.badge.inactive]">
          {{ link.badge }}
        </span>
      </slot>
    </ULinkCustom>
  </nav>
</template>

<script>
import { computed, defineComponent } from "vue";
import { defu } from "defu";
import { omit } from "lodash-es";
import UIcon from "../elements/Icon.vue";
import UAvatar from "../elements/Avatar.vue";
import ULinkCustom from "../elements/LinkCustom.vue";
import { useAppConfig } from "#imports";
import appConfig from "#build/app.config";
export default defineComponent({
  components: {
    UIcon,
    UAvatar,
    ULinkCustom
  },
  props: {
    links: {
      type: Array,
      default: () => []
    },
    ui: {
      type: Object,
      default: () => appConfig.ui.verticalNavigation
    }
  },
  setup(props) {
    const appConfig2 = useAppConfig();
    const ui = computed(() => defu({}, props.ui, appConfig2.ui.verticalNavigation));
    return {
      // eslint-disable-next-line vue/no-dupe-keys
      ui,
      omit
    };
  }
});
</script>
