<template>
  <main id="main" style="margin-top:-20px; padding-bottom:50px">
    <!-- eslint-disable max-len -->
    <div class="container" style="margin-top:25px;">
      <div class="row">
        <div class="col-md-12">
          <div class="section-header">
            <h2>Email Templates</h2>
          </div>
        </div>
      </div>
      <div v-if="checkAccess" class="row">
        <div :class="listClass">
          <ListView :items="list" @onRowClick="onRowClick" @onNew="onNew" :showNew="true" />
        </div>
        <div class="col-md-6" v-if="showDetailView">
          <DetailView
            :placeHolders="detailItem ? detailItem.placeHolders : []"
            :item="detailItem"
            @onClose="onDetailClose"
            :editable="clickedNew"
          />
        </div>
      </div>
      <div v-else class="row">
        <div class="col">
          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
        </div>
      </div>
    </div>
  </main>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";

import Log from "../../assets/Log";
import alert from "../shared/alert";
import ListView from "../shared/listView.vue";
import DetailView from "./templateDetailNew.vue";

export default {
  data() {
    return {
      detailItem: undefined,
      clickedNew: false
    };
  },
  components: {
    ListView,
    DetailView,
    alert
  },
  mounted() {
    this.getList();
  },
  computed: {
    ...mapState("template", ["list", "item"]),
    showDetailView() {
      return this.detailItem !== undefined && this.detailItem != null;
    },
    listClass() {
      return this.detailItem !== undefined && this.detailItem != null ? "col-md-6" : "col-md-12";
    },
    checkAccess() {
      if (Log.getUser().role === "Super Admin") {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    ...mapActions("template", ["getList"]),
    onRowClick(items) {
      if (items.length > 0) {
        const i = items[0];
        const item = this.list[i];
        if (this.detailItem !== item) {
          this.detailItem = item;
        } else this.detailItem = undefined;
        this.clickedNew = false;
      }
    },
    onNew() {
      this.detailItem = {};
      this.clickedNew = true;
    },
    onDetailClose() {
      this.detailItem = undefined;
    }
  }
};
</script>
