<template>
  <breadcrumb
    :rootState="rootState"
    :breadCrumbs="breadCrumbs"
    @onpropagate="onNavPropagate"
  >
    <div class="height-set">
      <div class="spinner-main">
        <Loader :loading="widgetLoading"> </Loader>
      </div>
      <source-list
        v-if="showSourceList"
        :sources="rootState.sources"
        @add_new_source="isAddMode = true"
      ></source-list>
      <source-edit
        v-if="showSourceEdit"
        :agents="rootState.agents"
        :selectedSourceId="rootState.selectedSourceId"
      ></source-edit>
    </div>
  </breadcrumb>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';

import SourceList from './components/SourceList.vue';
import SourceEdit from './components/SourceEdit.vue';
import Loader from '../../components/Loader/loader.vue';
import Breadcrumb from '../../components/Breadcrumb.vue';
import {
  ROOT_GETTER,
  ROOT_ACTION_SET_WINDOW_WIDTH,
  ROOT_ACTION_GET_SOURCES,
  ROOT_ACTION_GET_AGENTS,
  ROOT_ACTION_RESET_SUCCESS_AND_ERROR_MESSAGE,
  ROOT_GETTER_GET_BREADCRUMBS,
  ROOT_ACTION_SET_BREADCRUMB,
} from './constants';
import { toastConfig } from '../../utils/util';
export default {
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', this.onResize);
    });
    this.getSources();
    this.getAgents();
  },
  data() {
    return {
      isAddMode: false,
    };
  },
  computed: {
    ...mapGetters('root', {
      rootState: ROOT_GETTER,
      breadCrumbs: ROOT_GETTER_GET_BREADCRUMBS,
    }),
    widgetLoading() {
      return this.rootState.sourcesLoading || this.rootState.agentsLoading;
    },
    showSourceList() {
      return !this.showSourceEdit && !this.widgetLoading;
    },
    showSourceEdit() {
      return (
        (this.rootState.selectedSourceId !== null || this.isAddMode) &&
        !this.widgetLoading
      );
    },
    successMessage() {
      return this.rootState.successMessage;
    },
    errorMessage() {
      return this.rootState.errorMessage;
    },
  },
  methods: {
    ...mapActions('root', {
      setWindowWidth: ROOT_ACTION_SET_WINDOW_WIDTH,
      getSources: ROOT_ACTION_GET_SOURCES,
      getAgents: ROOT_ACTION_GET_AGENTS,
      resetToastMessages: ROOT_ACTION_RESET_SUCCESS_AND_ERROR_MESSAGE,
      onBreadCrumbEventFire: ROOT_ACTION_SET_BREADCRUMB,
    }),
    onResize() {
      this.setWindowWidth(window.innerWidth);
    },
    onNavPropagate(e) {
      if (e !== 'source-add') {
        this.isAddMode = false;
      }
      if (e === 'source-list') {
        this.getSources();
      }
      this.onBreadCrumbEventFire(e);
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize);
  },
  components: {
    Breadcrumb,
    SourceList,
    Loader,
    SourceEdit,
  },
  watch: {
    successMessage(v) {
      if (v !== null) {
        this.$toast.open(toastConfig.toastSuccess(v));
        this.resetToastMessages();
      }
    },
    errorMessage(v) {
      if (v !== null) {
        this.$toast.open(toastConfig.toastError(v));
        this.resetToastMessages();
      }
    },
  },
};
</script>