<template>
  <!-- eslint-disable max-len -->
  <main id="main">
    <div class="container">
      <div class="form">
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="section-header">
              <h2>Agent Management</h2>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-1 offset-1">
            <button
              @click="routerGoTo('/status/userManagementPage')"
              type="button"
              class="btn-white-border"
            >
              USERS
            </button>
          </div>
          <div class="col-md-1 offset-1">
            <button type="button" class="btn-solid-blue">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="'#myModalAgent'"
            >
              NEW AGENT
            </button>
            <div :id="'myModalAgent'" 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>
                  <Agent name="Agent" :isAddAgent="false" :item="item" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="container">
          <ListView
            :items="agents"
            :showNew="false"
            :editable="true"
            :deleteable="true"
            :showCustomAction="true"
            :showColumnChooser="false"
            :displayColumns="columns"
            :displayHeaders="headers"
            @onEdit="Edit"
            @onDelete="Delete"
          />
        </div>
      </div>
    </div>
  </main>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from 'vuex'
import axios from 'axios'
import Agent from '../../user/registerAgentSection.vue'
// import alert from '../../shared/alert.vue';
import ListView from '../../shared/listView.vue'

export default {
  name: 'agentManagementPage',
  components: {
    ListView,
    Agent,
    // alert,
  },
  props: {
    delete: Boolean,
  },
  data() {
    return {
      columns: ['id', 'name', 'surname', 'cellNumber', 'telephone', 'email'],
      headers: ['', '', '', '', '', '', ''],
      item: {},
    }
  },
  methods: {
    ...mapActions('register', ['getAgencies', 'getAgents', 'deleteAgent']),
    addNewAgent({ commit }) {
      axios
        .post('/api/agent')
        .then((result) => commit('saveAgent', result.data))
        .catch(console.error)
    },
    routerGoTo(goTo) {
      this.$router.push(goTo)
    },
    Edit(item) {
      this.$router.push({ name: 'UpdateAgentProfile', params: { agent: item } })
    },
    Delete(item) {
      console.log(item.id)
      this.deleteAgent(item.id)
    },
  },
  mounted() {
    this.getAgents()
    this.getAgencies()
  },
  computed: {
    ...mapState('register', ['agents', 'removeAgent']),
  },
}
</script>

<style></style>
