<template>
  <breadcrumb
    :rootState="rootState"
    :breadCrumbs="breadCrumbs"
    @onpropagate="onNavPropagate"
  >
    <div class="height-set card">
      <div class="card-body">
        <div class="spinner-main">
          <Loader :loading="rootState.emailtemplatesLoading"> </Loader>
        </div>
        <div class="row" v-if="!rootState.emailtemplatesLoading">
          <div class="col-lg-12">
            <div class="d-flex align-items-start">
              <b-button
                class="btn btn-success ms-auto"
                @click="showModal"
                >Add Template</b-button
              >
            </div>
            <b-tabs
              v-model="tabIndex"
              content-class="p-4"
              nav-class="nav-tabs-custom"
            >
              <b-tab title="Grid">
                <div class="row" v-if="rootState.emailtemplates.length === 0">
                  <div class="col-md-12 d-flex justify-content-center">
                    There are no records to show
                  </div>
                </div>
                <div class="row" v-else>
                  <div
                    class="col-xl-4 col-sm-6"
                    v-for="emailtemplate in rootState.emailtemplates"
                    :key="emailtemplate.id"
                  >
                    <grid
                      :data="emailtemplate"
                      @selectedId="selectTemplate"
                    ></grid>
                  </div>
                </div>
              </b-tab>
              <b-tab title="List">
                <div
                  class="table-responsive"
                  v-if="!rootState.emailtemplatesLoading"
                >
                  <list
                    :tableData="rootState.emailtemplates"
                    @selectedId="selectTemplate"
                    @onDelete="deleteEmailTemplate"
                    :deleteTemplateID="deleteTemplateID"
                    :deletingTemplateLoading="deletingTemplateLoading"
                    :loadingTemplates="rootState.emailtemplatesLoading"
                  ></list>
                </div>
              </b-tab>
            </b-tabs>
          </div>
        </div>
      </div>
    </div>
    <b-modal
      v-model="isEditMode"
      dialog-class="modal-dialog-slideout"
      :hide-footer="true"
      content-class="rounded-0"
      id="email-modal"
      @hide="customCloseMethod"
    > 
      <template #modal-header>
        <button type="button" class="btn btn-primary" @click="closeEditmodal">
          <i class="bx bx-left-arrow-alt font-size-16 align-middle me-2"></i>
          Close
        </button>
      </template>
      <edit-form
        @errorMessage="emitError"
        v-if="isEditMode"
        :AddUser="isAddUser"
        :loading="rootState.editTemplateLoading || templateIsUpdating"
        @formSubmit="onEdit"
        :selectedTemplateId="selectedTemplateId"
      ></edit-form>
    </b-modal>
  </breadcrumb>
</template>

<script>
import EmailEditor from '../../components/EmailTemplateEditor/index.vue';
import { mapActions, mapGetters } from 'vuex';
import EmailTemplateService from '../../service/emailTemplatesService';

import Loader from '../../components/Loader/loader.vue';
import Breadcrumb from '../../components/Breadcrumb.vue';
import Grid from './components/Grid.vue';
import List from './components/List.vue';
import EditForm from './components/EditForm.vue';
import { toastConfig } from '../../utils/util';
import {
  ROOT_GETTER,
  ROOT_ACTION_SET_WINDOW_WIDTH,
  ROOT_ACTION_RESET_SUCCESS_AND_ERROR_MESSAGE,
  ROOT_GETTER_GET_BREADCRUMBS,
  ROOT_ACTION_SET_BREADCRUMB,
  ROOT_ACTION_GET_EMAIL_TEMPLATES,
  ROOT_ACTION_ADD_EMAIL_TEMPLATE,
  ROOT_ACTION_UPDATE_EMAIL_TEMPLATE,
  ROOT_ACTION_SET_SUCCESS_MESSAGE,
  ROOT_ACTION_SET_ERROR_MESSAGE,
} from './constants';
// import sample from './sample.json';

import { BButton ,BTabs, BTab ,BModal} from 'bootstrap-vue-next'

export default {
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', this.onResize);
    });
    this.getEmailTemplates();
  },
  components: {
    Loader,
    Breadcrumb,
    Grid,
    EditForm,
    List,
    EmailEditor,
    BButton ,BTabs, BTab ,BModal
  },
  data() {
    return {
      tabIndex: 0,
      isAddUser: true,
      deleteTemplateID: null,
      deletingTemplateLoading: false,
      isEditMode: false,
      selectedTemplateId: null,
      templateIsUpdating: false,
    };
  },
  computed: {
    ...mapGetters('root', {
      rootState: ROOT_GETTER,
      breadCrumbs: ROOT_GETTER_GET_BREADCRUMBS,
    }),
    successMessage() {
      return this.rootState.successMessage;
    },
    errorMessage() {
      return this.rootState.errorMessage;
    },
  },
  methods: {


    showModal()
    {
       this.isEditMode =true
       this.isAddUser = true;
    },

    customCloseMethod() {
      this.isEditMode = false;
      this.selectedTemplateId = null;
      this.isAddUser = false;
    },
    emitSuccess(m) {
      this.setSuccessMessage(m);
    },
    emitError(m) {
      this.setErrorMessage(m);
    },
    selectTemplate(id) {
      this.selectedTemplateId = id;
      this.isEditMode = true;
    },
    async deleteEmailTemplate(id) {
      this.deleteTemplateID = id;
      this.deletingTemplateLoading = true;
      const {
        data: { message, success },
      } = await EmailTemplateService.deleteEmailtemplatebyid(id);
      if (!success) {
        this.setErrorMessage(message);
      } else {
        this.setSuccessMessage(message);
        this.getEmailTemplates();
      }
      this.deleteTemplateID = null;
      this.deletingTemplateLoading = false;
    },
    async onEdit(postData) {
      const body = {
        ..._.omit(
          {
            ...postData.postData,
            // editorData: data.isPlainEmail ? '' : data.editorData,
            // plainEmailContent: !data.isPlainEmail
            //   ? ''
            //   : data.plainEmailContent,
            content: postData.postData.isPlainEmail
              ? postData.postData.plainEmailContent
              : postData.postData.editorData,
          },
          ['editorData', 'plainEmailContent'],
        ),
      };
      const formData = new FormData();
      formData.append(
        'data',
        JSON.stringify({
          ...body,
        }),
      );
      formData.append('image', postData.file);
      if (this.selectedTemplateId) {
        this.templateIsUpdating = true;

        const {
          data: { message, success },
        } = await EmailTemplateService.updateEmailTemplate(
          this.selectedTemplateId,
          formData,
        );
        if (!success) {
          this.setErrorMessage(message);
        } else {
          this.setSuccessMessage(message);
          this.getEmailTemplates();
        }
        this.templateIsUpdating = false;
      } else {
        this.addEmailTemplate(formData);
      }
    },
    async updateEmailTemplate(id, postData) {},
    closeEditmodal() {
      this.isEditMode = false;
      this.selectedTemplateId = null;
    },
    ...mapActions('root', {
      setSuccessMessage: ROOT_ACTION_SET_SUCCESS_MESSAGE,
      setErrorMessage: ROOT_ACTION_SET_ERROR_MESSAGE,
      setWindowWidth: ROOT_ACTION_SET_WINDOW_WIDTH,
      resetToastMessages: ROOT_ACTION_RESET_SUCCESS_AND_ERROR_MESSAGE,
      onBreadCrumbEventFire: ROOT_ACTION_SET_BREADCRUMB,
      getEmailTemplates: ROOT_ACTION_GET_EMAIL_TEMPLATES,
      addEmailTemplate: ROOT_ACTION_ADD_EMAIL_TEMPLATE,
      updateEmailTemplate: ROOT_ACTION_UPDATE_EMAIL_TEMPLATE,
    }),
    onResize() {
      this.setWindowWidth(window.innerWidth);
    },
    onNavPropagate(e) {
      this.onBreadCrumbEventFire(e);
    },
  },
  watch: {
    successMessage(v) {
      if (v !== null) {
        this.$toast.open(toastConfig.toastSuccess(v));
        this.resetToastMessages();
        this.isEditMode = false;
        this.selectedTemplateId = null;
      }
    },
    errorMessage(v) {
      if (v !== null) {
        this.$toast.open(toastConfig.toastError(v));
        this.resetToastMessages();
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize);
  },
};
</script>