<template>
  <main id="main" style="margin-top: -20px; padding-bottom: 50px;">
    <div class="container">
      <div class="form">
        <div class="row">
          <div class="col">
            <div class="section-header">
              <h2>User Management</h2>
            </div>
          </div>
        </div>
        <div v-if="checkAccess">
          <div class="row">
            <div class="col-md-1 offset-1">
              <button type="button" class="btn-solid-blue">USERS</button>
            </div>
            <div class="col-md-1 offset-1">
              <button
                @click="routerGoTo('/status/agentUserManagementPage')"
                type="button"
                class="btn-white-border"
              >
                AGENTS
              </button>
            </div>
            <div class="col-md-1 offset-1">
              <button
                @click="routerGoTo('/status/agencyUserManagementPage')"
                type="button"
                class="btn-white-border"
              >
                AGENCIES
              </button>
            </div>
            <div class="col-md-2 offset-3">
              <button
                type="button"
                class="btn-white-border"
                data-toggle="modal"
                :data-target="'#myNewUserModal'"
              >
                NEW USER
              </button>
              <div :id="'myNewUserModal'" class="modal fade" role="dialog">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">
                        &times;
                      </button>
                    </div>
                    <Register />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="container">
            <ListView
              :items="individuals"
              :showNew="false"
              :editable="true"
              :deleteable="true"
              :showCustomAction="true"
              :showColumnChooser="false"
              :displayColumns="columns"
              :displayHeaders="headers"
              @onEdit="Edit"
              @onDelete="Delete"
            />
            <!-- <ListView
            :items="individuals"
            :showNew="false"
            :editable="true"
            :deleteable="true"
            :showCustomAction="true"
            :showColumnChooser="false"
            :CustomActionHeading="'Reset Password'"
            :displayColumns="columns"
            :displayHeaders="headers"
            @onEdit="Edit"
            @onDelete="Delete"
            @onResetPassword="PasswordReset"
          /> -->
          </div>
        </div>
        <div v-else>
          <alert
            :text="'You don\'t have permission to view this page'"
            :type="'ERROR'"
          />
        </div>
      </div>
    </div>
  </main>
</template>

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

import Log from '../../../assets/Log'
import alert from '../../shared/alert.vue'
import Register from '../../user/registerIndividual'
import ListView from '../../shared/listView.vue'

export default {
  name: 'userManagementPage',
  components: {
    ListView,
    alert,
    Register,
  },
  data() {
    return {
      columns: ['id', 'name', 'surname', 'cellNumber', 'telephone', 'email'],
      headers: ['', '', '', '', '', '', ''],
      item: {},
    }
  },
  props: {},
  methods: {
    ...mapActions('register', ['getIndividuals', 'deleteIndividual']),
    ...mapActions('role', ['retrieveRoles']),
    routerGoTo(goTo) {
      this.$router.push(goTo)
    },
    Edit(item) {
      this.$router.push({ name: 'UpdateInfo', params: { indivParam: item } })
    },
    Delete(item) {
      console.log(item)
      this.deleteIndividual(item.id)
    },
  },
  mounted() {
    this.getIndividuals()
  },
  computed: {
    ...mapState('register', ['individuals', 'removeIndividual']),
    ...mapGetters('role', ['getRoles']),
    checkAccess() {
      if (Log.getUser().role === 'Super Admin') {
        return true
      } else {
        return false
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
