<template>
  <div class="user-profile">
    <b-nav-item-dropdown no-caret class="user-profile__button">
      <template #button-content>
        <b-avatar :src="userProfileIconUrl"></b-avatar>
      </template>

      <b-dropdown-item
        class="no-event"
        v-for="(list, key) in cComponents"
        :key="key"
        v-on="cComponentListeners[key]"
      >
        <component
          v-if="list"
          :is="list"
          v-on="cComponentListeners[key]"
          :id="'user-profile' + key"
        />
      </b-dropdown-item>
    </b-nav-item-dropdown>
  </div>
</template>

<script>
import { BNavItemDropdown, BDropdownItem, BAvatar } from "bootstrap-vue";
import childComponents from "./ChildComponents";
import listeners from "./ChildComponents/listeners";
import userProfileData from "./ChildComponents/data";

export default {
  name: "user-profile",

  provide() {
    return {
      ...this.userProfileData,
      props: this.$props
    };
  },

  props: {
    childComponents: {
      type: Object,
      default() {
        return {};
      },
    },
    childComponentListeners: {
      type: Object,
      default() {
        return {};
      },
    },

    userProfileIconUrl: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      userProfileData,
    };
  },

  components: {
    BDropdownItem,
    BNavItemDropdown,
    BAvatar,
  },

  computed: {
    cComponents() {
      return {
        ...childComponents,
        ...this.childComponents,
      };
    },
    cComponentListeners() {
      return {
        ...listeners(this),
        ...this.childComponentListeners,
      };
    },
  },
};
</script>

<style lang="scss" src="./scss/_index.scss" scoped></style>
