<template>
  <breadcrumb
    :rootState="rootState"
    :breadCrumbs="breadCrumbs"
    @onpropagate="onNavPropagate"
  >
    <div class="height-set">
      <div class="spinner-main">
        <Loader :loading="false"> </Loader>
      </div>
      <list
        :omnichannels="omnichannels"
        :loading="omnichannelsLoading"
        @onEdit="onOmniChannelEditClick"
        @onAddButtonClicked="showModal"
      ></list>

      <BModal
        v-model="showOmnichannelEditModal"
        :dialog-class="modalDialogSlideout"
        :hide-footer="true"
        content-class="rounded-0"
        id="edit-modal"
        :style="{ display: 'block' }"
        @hide="customCloseMethod"
      >
        <template #modal-header>
          <button type="button" class="btn btn-primary" @click="closeAddEditModal">
            <i class="bx bx-left-arrow-alt font-size-16 align-middle me-2"></i>
            Close
          </button>
        </template>
        <detail
          :selectedOmnichannelId="selectedOmnichannelId"
          :AddUser="isAddUser"
          @setSuccessMessage="onSuccessMessage"
          @setErrorMessage="onErrorMessage"
          @setselectedOmnichannelId="selectedOmnichannelId = $event"
        ></detail>
      </BModal>
    </div>
  </breadcrumb>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import Breadcrumb from "../../components/Breadcrumb.vue";
import Loader from "../../components/Loader/loader.vue";
import { BModal, BButton } from "bootstrap-vue-next";

import moment from "moment";
import {
  ROOT_GETTER,
  ROOT_ACTION_RESET_SUCCESS_AND_ERROR_MESSAGE,
  ROOT_GETTER_GET_BREADCRUMBS,
  ROOT_ACTION_SET_ERROR_MESSAGE,
  ROOT_ACTION_SET_SUCCESS_MESSAGE,
} from "./constants";
import List from "./components/List.vue";
import Detail from "./components/Detail.vue";
import { toastConfig } from "../../utils/util";
import OmniService from "../../service/omniChannelService";
export default {
  mounted() {
    this.getOmniChannels();
  },
  data() {
    return {
      omnichannels: [],
      isAddUser: true,
      omnichannelsLoading: false,
      showOmnichannelEditModal: false,
      selectedOmnichannelId: null,
      addEditOmnichannelsLoading: false,
      modalDialogSlideout: "modal-dialog-slideout",
    };
  },
  computed: {
    ...mapGetters("root", {
      rootState: ROOT_GETTER,
      breadCrumbs: ROOT_GETTER_GET_BREADCRUMBS,
    }),
    successMessage() {
      return this.rootState.successMessage;
    },
    errorMessage() {
      return this.rootState.errorMessage;
    },
  },
  methods: {
    showModal() {
      this.showOmnichannelEditModal = true;
      this.isAddUser = true;
    },

    customCloseMethod() {
      this.showOmnichannelEditModal = false;
      this.selectedOmnichannelId = null;
      this.isAddUser = false;
    },

    closeAddEditModal() {
      this.showOmnichannelEditModal = false;
      this.selectedOmnichannelId = null;
      this.isAddUser = false;
      this.getOmniChannels();
    },
    onSuccessMessage(e) {
      this.setSuccessMessage(e);
    },
    onErrorMessage(e) {
      this.setErrorMessage(e);
    },
    clickeddd() {
      this.showOmnichannelEditModal = true;
    },

    onOmniChannelEditClick(v) {
      this.selectedOmnichannelId = v;
      this.showOmnichannelEditModal = true;
      this.isAddUser = false;
    },
    async getOmniChannels() {
      console.log("getOmniChannels");
      this.omnichannelsLoading = true;
      const {
        data: { data, message, success },
      } = await OmniService.getOmniWidgets();
      if (!success) {
        this.setErrorMessage(message);
      } else {
        this.omnichannels = _.map(data, (d) => ({
          ...d,
          createdOn: moment(d.created_at).format("MMM Do"),
          updatedOn: moment(d.updated_at).format("MMM Do"),
        }));
      }
      this.omnichannelsLoading = false;
    },

    ...mapActions("root", {
      resetToastMessages: ROOT_ACTION_RESET_SUCCESS_AND_ERROR_MESSAGE,
      setErrorMessage: ROOT_ACTION_SET_ERROR_MESSAGE,
      setSuccessMessage: ROOT_ACTION_SET_SUCCESS_MESSAGE,
    }),
    onNavPropagate() {},
  },
  components: {
    Breadcrumb,
    Loader,
    List,
    Detail,
    BModal,
    BButton,
  },
  //directives: { 'b-modal': VBModal },
  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>