export default {
  name: 'TheHeader',
  components: {
    BaseTabs: () => import(/* webpackChunkName: "BaseTabs" */ '@components/BaseTabs/index.vue'),
  },
  props: {
    title: {
      type: String,
      required: true,
    },
    help: {
      type: String,
    },
    breadcrumbs: {
      type: Array,
      required: true,
    },
    tabs: {
      type: Array,
    },
  },
  data() {
    return {
      activeTabIndex: 0,
    };
  },
  computed: {
    hasDefaultSlot() {
      return !!this.$slots.default;
    },
    hasNotificationSlot() {
      return !!this.$slots['notification'];
    },
  },
  created() {
    const tabs = this.tabs;

    if (tabs) {
      const tabSelectedIndex = tabs.findIndex(tab => !!tab.selected);
      if (tabSelectedIndex > 0) {
        this.activeTabIndex = tabSelectedIndex;
      }
    }
  },
  methods: {
    onChangeTab(newTabs) {
      this.$emit('update-tabs', newTabs);
    },
  },
};
