<template>
  <breadcrumb
    :rootState="rootState"
    :breadCrumbs="breadCrumbs"
    @onpropagate="onNavPropagate"
  >
    <div class="height-set">
      <div class="spinner-main">
        <Loader :loading="widgetLoading"> </Loader>
      </div>
      <template v-if="!widgetLoading">
        <channel-meta
          v-if="rootState.pageViewMode === 'channel-meta'"
          :channelMeta="rootState.channelMeta"
          :channelMetaLoading="rootState.channelMetaLoading"
          @onClick="onNavPropagate"
        ></channel-meta>
        <channel-manage
          :sources="sources"
          :mode="rootState.pageViewMode"
          @refetchSource="getSources()"
          v-else
        ></channel-manage>
      </template>
    </div>
  </breadcrumb>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';

import Breadcrumb from '../../components/Breadcrumb.vue';
import Loader from '../../components/Loader/loader.vue';
import ChannelMeta from './components/channelMeta.vue';
import ChannelManage from './components/channelManage.vue';
import {
  ROOT_GETTER,
  ROOT_ACTION_SET_WINDOW_WIDTH,
  ROOT_ACTION_GET_SOURCES,
  ROOT_ACTION_RESET_SUCCESS_AND_ERROR_MESSAGE,
  ROOT_GETTER_GET_BREADCRUMBS,
  ROOT_ACTION_SET_BREADCRUMB,
  ROOT_ACTION_GET_CHANNEL_META,
  ROOT_ACTION_GET_AGENTS,
} from './constants';
import SourceService from '../../service/source';
export default {
  mounted() {
    this.getChannelMeta();
    this.getSources();
    this.getAgents();
  },
  data() {
    return {
      sourceLoading: false,
      sources: [],
    };
  },
  computed: {
    ...mapGetters('root', {
      rootState: ROOT_GETTER,
      breadCrumbs: ROOT_GETTER_GET_BREADCRUMBS,
    }),
    widgetLoading() {
      const { agentsLoading } = this.rootState;
      return agentsLoading;
    },
  },
  methods: {
    ...mapActions('root', {
      getChannelMeta: ROOT_ACTION_GET_CHANNEL_META,
      getAgents: ROOT_ACTION_GET_AGENTS,
      onBreadCrumbEventFire: ROOT_ACTION_SET_BREADCRUMB,
    }),
    onNavPropagate(e) {
      this.onBreadCrumbEventFire(e);
    },
    async getSources() {
      this.errorMessage = '';
      this.sourceLoading = true;
      const {
        data: { data, message, success },
      } = await SourceService.getSources();
      if (!success) {
        this.errorMessage = message;
      } else {
        this.sources = _.map(data, ({ name: label, id: value }) => ({
          label,
          value,
        }));
      }
      this.sourceLoading = false;
    },
  },
  components: {
    Breadcrumb,
    Loader,
    ChannelMeta,
    ChannelManage,
  },
};
</script>