<template>
  <breadcrumb
    :rootState="rootState"
    :breadCrumbs="breadCrumbs"
    @onpropagate="onNavPropagate"
  >
    <div class="height-set">
      <div class="spinner-main">
        <Loader :loading="widgetLoading"> </Loader>
        <Loader> </Loader>
      </div>
      <list
        v-if="!widgetLoading"
        :workflows="workflows"
        :loading="workflowsLoading"
        @onEdit="onWorkflowEditClick"
        @onDelete="onWorkflowDeleteClick"
        @onAddButtonClicked="showModal"
      ></list>

      <b-modal
        v-model="showWorkflowEditModal"
        :dialog-class="modalDialogSlideout"
        :hide-footer="true"
        content-class="rounded-0"
        id="workflow-modal"
        @hide="customCloseMethod"
      >
        <template #modal-header>
          <button
            type="button"
            class="btn btn-primary"
            @click="closeAddEditModal"
          >
            <i class="material-icons">arrow_left_alt</i>
            Close
          </button>
        </template>

        <edit-form
          :selectedId="selectedId"
          :closemodal="isClose"
          :AddUser="isAddUser"
          :agentObj="agentObj"
          @formSubmit="formSubmit"
          :addEditWorkflowLoading="addEditWorkflowLoading"
          :workflowTypes="workflowTypes"
          :setErrorMessage="setErrorMessage"
          :setSuccessMessage="setSuccessMessage"
          :userData="userData"
          :success="isSuccess"
        ></edit-form>
      </b-modal>
    </div>
  </breadcrumb>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';

import Breadcrumb from '../../components/Breadcrumb.vue';
import Loader from '../../components/Loader/loader.vue';
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 EditForm from './components/EditForm.vue';
import { toastConfig } from '../../utils/util';
import WorkflowService from '../../service/workflowService';
import UserMangetService from '../../service/userManagementSerice';
import { VueFinalModal } from 'vue-final-modal';
import { BModal, BButton } from 'bootstrap-vue-next';
import { Icon } from '@iconify/vue';

export default {
  data() {
    return {
      workflowsLoading: false,
      isAddUser: true,
      workflows: [],
      workflowTypesLoading: false,
      workflowTypes: [],
      showWorkflowEditModal: false,
      selectedId: null,
      addEditWorkflowLoading: false,
      modalDialogSlideout: 'modal-dialog-slideout',
      userData: {},
      isClose: false,
      isSuccess: false,
      agentObj: {},
    };
  },
  mounted() {
    //this.getWorkflows();
    // this.getWorkflowTypes();
    this.getUserManagementData();
  },
  computed: {
    widgetLoading() {
      return this.workflowTypesLoading;
    },
    ...mapGetters('root', {
      rootState: ROOT_GETTER,
      breadCrumbs: ROOT_GETTER_GET_BREADCRUMBS,
    }),
    successMessage() {
      return this.rootState.successMessage;
    },
    errorMessage() {
      return this.rootState.errorMessage;
    },
  },
  methods: {
    customCloseMethod() {
      this.showWorkflowEditModal = false;
      this.selectedId = null;
      this.isAddUser = true;
      this.isClose = false;
    },

    showModal() {
      this.showWorkflowEditModal = true;
      this.isAddUser = true;
      this.isClose = true;
    },
    closeAddEditModal() {
      this.showWorkflowEditModal = false;
      this.selectedId = null;
    },
    onNavPropagate() {},
    onWorkflowEditClick(id) {
      this.showWorkflowEditModal = true;
      this.selectedId = id;
      this.isAddUser = false;
    },

    async onWorkflowDeleteClick(id) {
      this.workflowTypesLoading = true;
      const {
        data: { data, message, success },
      } = await UserMangetService.deleteUser(id);
      if (!success) {
        this.setErrorMessage(message);
      } else {
        this.setSuccessMessage(message);
        this.getUserManagementData();
      }

      this.workflowTypesLoading = false;
    },
    ...mapActions('root', {
      resetToastMessages: ROOT_ACTION_RESET_SUCCESS_AND_ERROR_MESSAGE,
      setErrorMessage: ROOT_ACTION_SET_ERROR_MESSAGE,
      setSuccessMessage: ROOT_ACTION_SET_SUCCESS_MESSAGE,
    }),

    async getUserManagementData() {
      this.workflowTypesLoading = true;
      const {
        data: { data, message, success },
      } = await UserMangetService.getUserManagementData();
      if (!success) {
        this.setErrorMessage(message);
      } else {
        this.userData = data;
        this.agentObj = {
          ams_2000: this.userData.ams_2000,
          ams_evo: this.userData.ams_evo,
          neo_verify: this.userData.neo_verify,
        };

        this.workflows = _.map(data.users, (d) => ({
          ...d,
        })).reverse();

      }

      this.workflowTypesLoading = false;
    },
    async formSubmit(formdata) {
      if (this.selectedId === null) {
        this.addEditWorkflowLoading = true;
        const {
          data: { data, message, success },
        } = await UserMangetService.createUser(formdata);
        if (!success) {
          this.setErrorMessage(message);
          this.isSuccess = false;
        } else {
          this.setSuccessMessage(message);
          this.showWorkflowEditModal = false;
          this.selectedId = null;
          this.getUserManagementData();
          this.isSuccess = true;
        }
        this.addEditWorkflowLoading = false;
      } else {
        this.addEditWorkflowLoading = true;
        const {
          data: { data, message, success },
        } = await UserMangetService.updateUserData(this.selectedId, formdata);
        if (!success) {
          this.setErrorMessage(message);
          this.isSuccess = false;
        } else {
          this.setSuccessMessage(message);
          this.showWorkflowEditModal = false;
          this.selectedId = null;
          this.getUserManagementData();
          this.isSuccess = true;
        }
        this.addEditWorkflowLoading = false;
      }
    },
  },
  components: {
    Breadcrumb,
    Loader,
    List,
    EditForm,
    BModal,
    BButton,
    Icon,
  },
  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>