<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="!widgetLoading"
        :sources="sources"
        :loading="sourceLoading"
        @onEdit="onSourceEditClick"
        @onAddButtonClicked="showModal"
      ></source-list>
      <b-modal
        v-model="showSourceEditModal"
        dialog-class="modal-dialog-slideout"
        :hide-footer="true"
        content-class="rounded-0"
        id="source-modal"
        @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>
        <source-edit
          :selectedSourceID="selectedSourceID"
          :AddUser="isAddUser"
          @formSubmit="formSubmit"
          @cancel="cancelmodal"
          :addEditSourceLoading="addEditSourceLoading"
        ></source-edit>
      </b-modal>
    </div>
  </breadcrumb>
</template>

<script>
import { mapActions, mapGetters } from "vuex";

import Loader from "../../components/Loader/loader.vue";
import Breadcrumb from "../../components/Breadcrumb.vue";
import moment from "moment";
import SourceList from "./components/SourceList.vue";
import SourceEdit from "./components/SourceEdit.vue";
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 { toastConfig } from "../../utils/util";
import SourceService from "../../service/source";
import { BModal } from "bootstrap-vue-next";

export default {
  data() {
    return {
      sources: [],
      sourceLoading: false,
      agents: [],
      isAddUser: true,
      agentsLoading: false,
      showSourceEditModal: false,
      selectedSourceID: null,
      addEditSourceLoading: false,
    };
  },
  mounted() {
    console.log(
      "source-edit",
      this.selectedSourceID,
      ".......",
      this.addEditSourceLoading
    );
    this.getSources();
    this.getAgents();
  },
  computed: {
    ...mapGetters("root", {
      rootState: ROOT_GETTER,
      breadCrumbs: ROOT_GETTER_GET_BREADCRUMBS,
    }),
    successMessage() {
      return this.rootState.successMessage;
    },
    errorMessage() {
      return this.rootState.errorMessage;
    },
    widgetLoading() {
      return this.agentsLoading;
    },
  },
  methods: {
    showModal() {
      console.log("showModal");
      this.showSourceEditModal = true;
      this.isAddUser = true;
    },

    customCloseMethod() {
      console.log("custommodalll");
      this.showSourceEditModal = false;
      this.isAddUser = false;
    },
    cancelmodal() {
      console.log("cancelmodal");
      this.showSourceEditModal = false;
      this.isAddUser = false;
    },
    async formSubmit(formData) {
      this.addEditSourceLoading = true;
      if (this.selectedSourceID) {
        const {
          data: { message, success },
        } = await SourceService.updateSource(this.selectedSourceID, formData);
        if (!success) {
          this.setErrorMessage(message);
        } else {
          this.setSuccessMessage(message);
          this.selectedSourceID = null;
          this.showSourceEditModal = false;
          this.getSources();
        }
      } else {
        const {
          data: { message, success },
        } = await SourceService.createSource(formData);
        if (!success) {
          this.setErrorMessage(message);
        } else {
          this.setSuccessMessage(message);
          this.selectedSourceID = null;
          this.showSourceEditModal = false;
          this.getSources();
        }
      }

      this.addEditSourceLoading = false;
    },
    onSourceEditClick(v) {
      this.selectedSourceID = v;
      this.showSourceEditModal = true;
      this.isAddUser = false;
    },
    async getSources() {
      console.log("getSources");
      this.sourceLoading = true;
      const {
        data: { data, message, success },
      } = await SourceService.getSources();
      if (!success) {
        this.setErrorMessage(message);
      } else {
        this.sources = _.map(data, (d) => ({
          ...d,
          createdOn: moment(d.created_at).format("MMM Do"),
          updatedOn: moment(d.updated_at).format("MMM Do"),
        }));
      }
      this.sourceLoading = false;
    },
    async getAgents() {
      this.agentsLoading = true;
      const {
        data: { data, message, success },
      } = await SourceService.getAgents();
      if (!success) {
        this.setErrorMessage(message);
      } else {
        this.agents = data;
      }
      this.agentsLoading = false;
    },
    addEditSource() {},
    closeAddEditModal() {
      this.showSourceEditModal = false;
      this.selectedSourceID = null;
    },
    ...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,
    SourceList,
    SourceEdit,
    BModal,
  },
  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>