<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>Agency 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
              @click="routerGoTo('/status/agentUserManagementPage')"
              type="button"
              class="btn-white-border"
            >
              AGENTS
            </button>
          </div>
          <div class="col-md-1 offset-1">
            <button type="button" class="btn-solid-blue">AGENCIES</button>
          </div>
          <div class="col-md-3 offset-3">
            <button
              type="button"
              class="btn-white-border"
              data-toggle="modal"
              :data-target="'#myModalAgency'"
            >
              NEW AGENCY
            </button>
            <div :id="'myModalAgency'" 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>
                  <Agency name="Agency" :isAddAgent="false" :item="item" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="container">
          <ListView
            :items="agencies"
            :showNew="false"
            :editable="false"
            :deleteable="false"
            :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 Agency from '../../user/registerAgencySection.vue'
// import alert from '../../shared/alert.vue';
import ListView from '../../shared/listView.vue'

export default {
  name: 'agencyManagementPage',
  components: {
    ListView,
    Agency,
    // alert,
  },
  props: {
    delete: Boolean,
  },
  data() {
    return {
      columns: ['id', 'agencyName', 'eaabeffcNumber', 'companyRegNumber'],
      headers: ['', '', '', ''],
      item: {},
    }
  },
  methods: {
    ...mapActions('register', ['getAgencies', 'deleteAgency']),
    addNewAgency({ commit }) {
      axios
        .post('/api/agency')
        .then((result) => commit('saveAgency', result.data))
        .catch(console.error)
    },
    routerGoTo(goTo) {
      this.$router.push(goTo)
    },
    Edit(item) {
      this.$router.push({
        name: 'UpdateAgencyProfile',
        params: { agency: item },
      })
    },
    Delete(item) {
      console.log(item.id)
      this.deleteAgency(item.id)
    },
  },
  mounted() {
    this.getAgencies()
  },
  computed: {
    ...mapState('register', ['agencies', 'removeAgency']),
  },
}
</script>

<style></style>
