<template>
  <div>
    <div class="spinner-main">
      <Loader :loading="loading"> </Loader>
    </div>
    <template v-if="!loading">
      <button
        v-show="isMobileView"
        type="button"
        class="btn btn-sm px-3 font-size-16 hamburg-profile-mobile-btn"
        @click="showMobileTabSelectionMenu = true"
      >
        <i class="fa fa-fw fa-bars"></i>
      </button>
      <div class="row d-flex justify-content-between">
        <div class="col-md-3" v-show="!isMobileView">
          <div class="row justify-content-center">
            <div class="col-xl-12">
              <div class="card">
                <div class="card-body">
                  <section-tab
                    v-for="(tabSection, index) in sourceState.tabSections"
                    :key="index"
                    :index="index"
                    :detail="tabSection"
                    @selectTabIndex="setSelectedTabIndex"
                    :selectedTabIndex="selectedTabIndex"
                    :isEditMode="isEditMode"
                  ></section-tab>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div :class="rightSectionClassName">
          <source-detail
            v-if="showSection('SOURCE_INFO')"
            :sourceState="sourceState"
            @formSubmit="saveSourceMetaDetails"
          ></source-detail>
          <source-channels
            v-if="showSection('SOURCE_CHANNELS') && sourceState.sourceDetails"
            :sourceState="sourceState"
          >
          </source-channels>
        </div>
      </div>
      <b-modal
        v-show="isMobileView"
        v-model="showMobileTabSelectionMenu"
        dialog-class="modal-dialog-slideout"
        :hide-footer="true"
        content-class="rounded-0"
      >
        <template #modal-header>
          <button
            type="button"
            class="btn btn-primary"
            @click="showMobileTabSelectionMenu = false"
          >
            <i class="bx bx-left-arrow-alt font-size-16 align-middle me-2"></i>
            Close
          </button>
        </template>
        <div class="row justify-content-center">
          <div class="col-xl-12">
            <div class="card">
              <div class="card-body">
                <section-tab
                  v-for="(tabSection, index) in sourceState.tabSections"
                  :key="index"
                  :index="index"
                  :detail="tabSection"
                  @selectTabIndex="setSelectedTabIndex"
                  :selectedTabIndex="selectedTabIndex"
                  :isEditMode="isEditMode"
                ></section-tab>
              </div>
            </div>
          </div>
        </div>
      </b-modal>
    </template>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';

import SourceDetail from './SourceDetail.vue';
import SectionTab from './SectionTab.vue';
import Loader from '../../../components/Loader/loader.vue';
import SourceChannels from './SourceChannels.vue';
import { BModal } from 'bootstrap-vue-next'

import {
  SOURCE_GETTER,
  ROOT_GETTER_ISMOBILE_VIEW,
  SOURCE_ACTION_SAVE_SOURCE_META_DETAILS,
  ROOT_GETTER,
  ROOT_ACTION_SET_BREADCRUMB,
  PHONEWIDGET_GETTER,
} from '../constants';
export default {
  data() {
    return {
      showMobileTabSelectionMenu: false,
      selectedTabIndex: 0,
    };
  },
  props: {
    agents: {
      type: Array,
      required: true,
    },
    selectedSourceId: {
      type: String,
    },
  },
  mounted() {
    if (this.selectedSourceId === null) {
      this.onBreadCrumbEventFire('source-add');
    } else {
      this.onBreadCrumbEventFire('source-edit');
    }
  },
  computed: {
    rightSectionClassName() {
      if (this.isMobileView) {
        return 'col-md-12';
      }
      return 'col-md-9';
    },
    ...mapGetters('source', {
      sourceState: SOURCE_GETTER,
    }),
    ...mapGetters('phonewidget', {
      phonewidgetState: PHONEWIDGET_GETTER,
    }),
    ...mapGetters('root', {
      isMobileView: ROOT_GETTER_ISMOBILE_VIEW,
      rootState: ROOT_GETTER,
    }),
    loading() {
      return (
        this.sourceState.sourceDetailsLoading &&
        this.sourceState.selectedChannel === null
      );
    },
    isEditMode() {
      return this.rootState.selectedSourceId ? true : false;
    },
  },
  methods: {
    ...mapActions('source', {
      saveSourceMetaDetails: SOURCE_ACTION_SAVE_SOURCE_META_DETAILS,
    }),
    ...mapActions('root', {
      onBreadCrumbEventFire: ROOT_ACTION_SET_BREADCRUMB,
    }),
    setSelectedTabIndex(index) {
      this.selectedTabIndex = index;
      if (this.isMobileView) {
        this.showMobileTabSelectionMenu = false;
      }
    },
    showSection(label) {
      const tabsToShow =
        this.sourceState.tabSections[this.selectedTabIndex].tabsToShow;
      if (_.includes(tabsToShow, label)) {
        return true;
      }
      return false;
    },
  },
  components: {
    SourceDetail,
    SectionTab,
    Loader,
    SourceChannels,
    BModal
  },
};
</script>