<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"
        :leadsData="leadsData"
        :leadInfo="leadInfo"
        :loading="workflowsLoading"
        :isFilterActive="isFilterActive"
        @onDelete="onWorkflowDeleteClick"
        @onAddButtonClicked="showModal"
        @onEditContact="onWorkflowEditClick"
        @onAddFiltersClicked="showFilterModal"
        @onErrorMethod="OnerrorMessage"
        @reset="resetFilters"
        @uploadcsv="uploadcsv"
        @datefilter="datefilter"
        :fromdate="pickedFrom"
        :todate="pickedTo"
        @page-changed="updateCurrentPage"
        @page-show="updatePageselection"
        :currentPages="currentPage"
        :totalpage="totalpage"
      ></list>

      <b-modal
        v-model="addEditModal"
        :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"
          @formSubmit="formSubmit"
          :addEditWorkflowLoading="addEditWorkflowLoading"
          :workflowTypes="workflowTypes"
          :setErrorMessage="setErrorMessage"
          :setSuccessMessage="setSuccessMessage"
          :userData="userData"
          :success="isSuccess"
          :filtersData="filtersData"
        ></edit-form>
      </b-modal>

      <b-modal
        v-model="showWorkflowEditModal"
        :dialog-class="modalDialogSlideout"
        :hide-footer="true"
        content-class="rounded-0"
        id="workflow-modal"
        @hide="customCloseMethodUpdate"
      >
        <template #modal-header>
          <button type="button" class="btn btn-primary" @click="closeAddEditModal">
            <i class="material-icons">arrow_left_alt</i>
            Close
          </button>
        </template>
        <update-form
          :selectedId="selectedId"
          :closemodal="isClose"
          :AddUser="isAddUser"
          @formSubmit="formSubmit"
          :addEditWorkflowLoading="addEditWorkflowLoading"
          :workflowTypes="workflowTypes"
          :setErrorMessage="setErrorMessage"
          :setSuccessMessage="setSuccessMessage"
          :userData="userData"
          :success="isSuccess"
          :filtersData="filtersData"
        >
        </update-form>
      </b-modal>

      <b-modal
        v-model="showfilterModal"
        :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>

        <filter-form
          @filterSubmit="filterSubmit"
          @clearfilter="clearfilter"
          :addEditWorkflowLoading="addEditWorkflowLoading"
          :clear="isClearfilter"
          :filtersData="filtersData"
          :isFilterActive="isFilterActive"
        ></filter-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 UpdateForm from "./components/UpdateForm.vue";

import FilterForm from "./components/FilterForm.vue";
import { toastConfig } from "../../utils/util";
import leadsService from "../../service/leadsContactsService";
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,
      isFilterActive: false,
      leadsData: [],
      leadInfo: {},
      filtersData: {},
      workflowTypesLoading: false,
      workflowTypes: [],
      showWorkflowEditModal: false,
      addEditModal: false,
      showfilterModal: false,
      selectedId: null,
      addEditWorkflowLoading: false,
      modalDialogSlideout: "modal-dialog-slideout",
      userData: {},
      isClose: false,
      isSuccess: false,
      isClearfilter: false,
      //pickedFrom: new Date("2010-01-01"),
      pickedFrom: this.getPastDate(),
      pickedTo: new Date(),
      currentPage: 1,
      totalpage: 10,
    };
  },
  mounted() {
    this.getLeadsData(null);
    this.getFilters();
  },
  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: {
    updateCurrentPage(pageNumber) {
      this.currentPage = pageNumber;
    },
    updatePageselection(number) {
      this.totalpage = number;
    },
    getPastDate() {
      const today = new Date();
      const pastDate = new Date(
        today.getFullYear(),
        today.getMonth() - 1,
        today.getDate()
      );
      return pastDate;
    },
    resetFilters() {
      this.isClearfilter = true;
      this.getLeadsData(null);
      this.isFilterActive = false;
    },

    OnerrorMessage(msg) {
      this.setErrorMessage(msg);
    },

    customCloseMethod() {
      //this.showWorkflowEditModal = false;
      this.addEditModal = false;
      this.selectedId = null;
      this.isAddUser = true;
      this.isClose = false;
    },

    customCloseMethodUpdate() {
      this.showWorkflowEditModal = false;
      this.selectedId = null;
      this.isAddUser = true;
      this.isClose = false;
    },

    showModal() {
      //this.showWorkflowEditModal = true;
      this.addEditModal = true;
      this.isAddUser = true;
      this.isClose = true;
    },

    showFilterModal() {
      this.showWorkflowEditModal = false;
      this.addEditModal = false;
      this.showfilterModal = true;
    },
    closeAddEditModal() {
      this.showWorkflowEditModal = false;
      this.addEditModal = false;
      this.selectedId = null;
    },
    onNavPropagate() {},
    onWorkflowEditClick(id) {
      this.showWorkflowEditModal = true;
      this.selectedId = id;
      this.isAddUser = false;
    },

    async uploadcsv(csvdata) {
      let postdata = {
        contacts: csvdata,
      };
      this.workflowTypesLoading = true;
      const {
        data: { data, message, success },
      } = await leadsService.uploadcsv(postdata);

      if (!success) {
        this.setErrorMessage("Something went wrong please check the csv file");
      } else {
        this.setSuccessMessage("Leads data uploaded successfully");
        this.getLeadsData(null);
      }

      this.workflowTypesLoading = false;
    },

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

      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 getLeadsData(filter) {
      this.workflowTypesLoading = true;
      let getDefaultParams = "";

      if (filter != null) {
        getDefaultParams = () => filter;
      } else {
        getDefaultParams = () => ({
          df: this.formatDates(this.pickedFrom),
          dt: this.formatDates(this.pickedTo),
          stf: "0",
          stp: "0",
          sts: "0",
          sis: "0",
          sas: "0",
          sais: "0",
          length: 10,
          start: 0,
          aa: null,
          ps: null,
          ms: null,
          mks: null,
          fs: null,
          cs: null,
          cbs: null,
          order: [
            {
              dir: "desc",
              column: "5",
            },
          ],
        });
      }
      // const {
      //   data: { data, message, success },
      // } = await leadsService.getLeads(getDefaultParams());

      const data = await leadsService.getLeads(getDefaultParams());

      this.leadsData = data.data.data;
      this.leadInfo = data.data;

      this.workflowTypesLoading = false;
    },

    async datefilter(data, date) {
      this.pickedFrom = date.from;
      this.pickedTo = date.to;
      this.getLeadsData(data);
    },

    async getFilters() {
      const data = await leadsService.getFilters();
      this.filtersData = data;
    },

    filterSubmit(data) {
      let newData = {
        df: this.formatDates(this.pickedFrom),
        dt: this.formatDates(this.pickedTo),
      };
      Object.assign(data, newData);

      this.showfilterModal = false;
      this.isClose = false;
      this.getLeadsData(data);
      this.isFilterActive = true;
    },
    clearfilter(val) {
      this.showfilterModal = false;
      this.isFilterActive = false;
      this.getLeadsData(null);
      this.isClearfilter = true;
    },

    async formSubmit(formdata) {
      if (!this.selectedId) {
        this.addEditWorkflowLoading = true;
        const {
          data: { success, error_message },
        } = await leadsService.createLead(formdata);

        if (!success) {
          error_message
            ? this.setErrorMessage(error_message[0])
            : this.setErrorMessage("Something went wrong. Please try again");
          this.isSuccess = false;
        } else {
          this.setSuccessMessage("Contacts added Successfully");
          this.showWorkflowEditModal = false;
          this.addEditModal = false;
          this.selectedId = null;
          this.getLeadsData(null);
          this.isSuccess = true;
        }
        this.addEditWorkflowLoading = false;
      } else {
        this.addEditWorkflowLoading = true;
        const {
          data: { success, error_message },
        } = await leadsService.updateLead(this.selectedId, formdata);
        if (!success) {
          error_message
            ? this.setErrorMessage(error_message[0])
            : this.setErrorMessage("Something went wrong. Please try again");
          this.isSuccess = false;
        } else {
          this.setSuccessMessage("Contacts updated Successfully");
          this.showWorkflowEditModal = false;
          this.addEditModal = false;
          this.selectedId = null;
          this.getLeadsData(null);
          this.isSuccess = true;
        }
        this.addEditWorkflowLoading = false;
      }
    },

    formatDates(selecteddate) {
      const dateObject = new Date(selecteddate);
      const day = ("0" + dateObject.getDate()).slice(-2);
      const month = ("0" + (dateObject.getMonth() + 1)).slice(-2);
      const year = dateObject.getFullYear();

      this.formattedDate = `${month}${day}${year}`;

      return this.formattedDate;
    },
  },
  components: {
    Breadcrumb,
    Loader,
    List,
    EditForm,
    UpdateForm,
    FilterForm,
    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>