<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"
        @onAddButtonClicked="showModal"
      ></list>

      <BModal
        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="bx bx-left-arrow-alt font-size-16 align-middle me-2"></i>
            Close
          </button>
        </template>
        <edit-form
          :selectedId="selectedId"
          @formSubmit="formSubmit"
          :addEditWorkflowLoading="addEditWorkflowLoading"
          :workflowTypes="workflowTypes"
          :setErrorMessage="setErrorMessage"
          :setSuccessMessage="setSuccessMessage"
          :AddUser="isAddUser"
        ></edit-form>
      </BModal>
    </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 { VueFinalModal } from "vue-final-modal";
import { BModal } from "bootstrap-vue-next";

export default {
  data() {
    return {
      workflowsLoading: false,
      workflows: [],
      isAddUser: true,
      workflowTypesLoading: false,
      workflowTypes: [],
      showWorkflowEditModal: false,
      selectedId: null,
      addEditWorkflowLoading: false,
      modalDialogSlideout: "modal-dialog-slideout",
    };
  },
  mounted() {
    this.getWorkflows();
    this.getWorkflowTypes();
  },
  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: {
    showModal() {
      console.log("showModal");
      this.showWorkflowEditModal = true;
      this.isAddUser = true;
    },

    customCloseMethod() {
      console.log("custommodalll");
      this.showSourceEditModal = false;
      this.selectedId = null;
      this.isAddUser = false;
    },
    closeAddEditModal() {
      this.showWorkflowEditModal = false;
      this.selectedId = null;
      this.isAddUser = false;
    },
    onNavPropagate() {},
    onWorkflowEditClick(id) {
      console.log("onWorkflowEditClick", id);
      this.showWorkflowEditModal = true;
      this.selectedId = id;
      this.isAddUser = false;
    },
    ...mapActions("root", {
      resetToastMessages: ROOT_ACTION_RESET_SUCCESS_AND_ERROR_MESSAGE,
      setErrorMessage: ROOT_ACTION_SET_ERROR_MESSAGE,
      setSuccessMessage: ROOT_ACTION_SET_SUCCESS_MESSAGE,
    }),
    async getWorkflows() {
      this.workflowsLoading = true;
      const {
        data: { data, message, success },
      } = await WorkflowService.getWorkflows();
      if (!success) {
        this.setErrorMessage(message);
      } else {
        this.workflows = _.map(data, (d) => ({
          ...d,
          createdOn: moment(d.created_at).format("MMM Do"),
          updatedOn: moment(d.updated_at).format("MMM Do"),
        }));
      }
      this.workflowsLoading = false;
    },
    async getWorkflowTypes() {
      this.workflowTypesLoading = true;
      const {
        data: { data, message, success },
      } = await WorkflowService.getWorkflowTypes();
      if (!success) {
        this.setErrorMessage(message);
      } else {
        this.workflowTypes = data;
      }
      this.workflowTypesLoading = false;
    },
    async formSubmit(formdata) {
      if (this.selectedId === null) {
        this.addEditWorkflowLoading = true;
        console.log(JSON.stringify(formdata));
        const {
          data: { data, message, success },
        } = await WorkflowService.createWorkflows(formdata);
        if (!success) {
          this.setErrorMessage(message);
        } else {
          this.setSuccessMessage(message);
          this.showWorkflowEditModal = false;
          this.selectedId = null;
          this.getWorkflows();
        }
        this.addEditWorkflowLoading = false;
      } else {
        this.addEditWorkflowLoading = true;
        console.log(JSON.stringify(formdata));
        const {
          data: { data, message, success },
        } = await WorkflowService.updateWorkflows(this.selectedId, formdata);
        if (!success) {
          this.setErrorMessage(message);
        } else {
          this.setSuccessMessage(message);
          this.showWorkflowEditModal = false;
          this.selectedId = null;
          this.getWorkflows();
        }
        this.addEditWorkflowLoading = false;
      }
    },
  },
  components: {
    Breadcrumb,
    Loader,
    List,
    EditForm,
    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>