<template>
  <div id="bottom_bar" class="component component-bottom_bar" v-show="!!showBar">
    <div class="start">
      <span v-if="actions.showDeleteOrAddEntity">
        <a class="link" @click="clickDelete"><i class="fas fa-trash"></i> &nbsp; Delete {{ entity }}</a>
        &nbsp; | &nbsp;
        <a class="link" @click="addNew"><i class="far fa-plus"></i> Add New</a>
      </span>
    </div>
    <div class="end">
      <a class="button dark-gray" @click="discard" v-if="!!actions.showDiscard">Discard</a>
  
      <span class="status-container" v-if="!!actions.showStatusDropdown">
        <span class="password-container" v-if="!!selectedStatus && selectedStatus.mask === 4">
          Please enter a password: &nbsp;
          <input :type="(!!showPassword) ? 'type' : 'password'" title="Page Password" autocomplete="new-password" v-model="pagePassword" />
          <a class="icon-container" @click="showPassword = !showPassword"><i class="far" :class="{ 'fa-eye-slash': !!showPassword, 'fa-eye': !showPassword }"></i></a>
        </span>
        <dropdown class="status-dropdown dark" :options="statusOptions" option-label="name" v-model="selectedStatus" v-if="!!actions.showStatusDropdown" />
      </span>
      
      <a class="button" :class="{ disabled: !!disableSave }" @click="save" v-if="!!actions.showSave">Save</a>
      
      <a class="icon-container" @click="clickDelete" v-if="!!actions.showDeleteIcon && !!$store.state.actions.showingDelete"><i class="fas fa-trash"></i></a>
      
      <a class="button" @click="addNew" v-if="!!actions.showAddNew">Add New</a>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        routeMap: {
          "Dashboard": {
            show: false
          },
          "Customization": {
            show: true,
            actions: { showSave: true, showDiscard: true }
          },
          "General Settings": {
            show: true,
            actions: { showSave: true, showDiscard: true }
          },
          "Super Admin Settings": {
            show: true,
            actions: { showSave: true, showDiscard: true }
          },
          "Pages": {
            show: true,
            actions: { showAddNew: true, showDeleteIcon: true }
          },
          "Page": {
            show: true,
            actions: { showSave: true, showStatusDropdown: true, showDeleteOrAddEntity: true },
            entity: "Page"
          },
          "File Library": {
            show: true,
            actions: { showDeleteIcon: true }
          },
          "Not Found": {
            show: false
          }
        },
        statusOptions: [
          { name: "Draft", mask: 8 },
          { name: "Public", mask: 1 },
          { name: "Private", mask: 2 },
          { name: "Password Protected", mask: 4 },
          { name: "Deleted", mask: 128 }
        ],
        showPassword: false
      }
    },
    computed: {
      showBar: function() {
        if (!!this.$route && !!this.$route.meta && !!this.$route.meta.view) {
          return this.routeMap[this.$route.meta.view].show;
        }
      },
      actions: function() {
        if (!!this.$route && !!this.$route.meta && !!this.$route.meta.view && !!this.routeMap[this.$route.meta.view].actions) {
          return this.routeMap[this.$route.meta.view].actions;
        }
        else {
          return {};
        }
      },
      entity: function() {
        if (!!this.$route && !!this.$route.meta && !!this.$route.meta.view && !!this.routeMap[this.$route.meta.view].entity) {
          return this.routeMap[this.$route.meta.view].entity;
        }
      },
      selectedStatus: {
        get() {
          const self = this;
          if (!!this.$store.state.variables.statusMask) {
            return this.statusOptions.find( function(status) {
              return status.mask === self.$store.state.variables.statusMask;
            });
          }
        },
        set(val) {
          this.$store.commit('resetPagePassword');
          this.$store.commit('setStatus', val.mask);
        }
      },
      pagePassword: {
        get() {
          return this.$store.state.variables.pagePassword;
        },
        set(val) {
          this.$store.commit('setPagePassword', val);
        }
      },
      disableSave() {
        if (!!this.selectedStatus) {
          return this.selectedStatus.mask === 4 && !this.pagePassword;
        }
      }
    },
    methods: {
      save: function() {
        this.$store.commit('initiateSave');
      },
      discard: function() {
        this.$store.commit('initiateDiscard');
      },
      clickDelete: function() {
        this.$store.commit('initiateDelete');
      },
      addNew: function() {
        this.$store.commit('initiateAddNew');
      }
    }
  }
</script>