<template>
  <section class="content-padding">
    <div v-if="errorText" class="alert alert-danger" role="alert">
      {{errorText}}
    </div>
    <div class="card-container">
      <div class="admin-card" v-for="admin of admins" :key="admin.byuId">
        <h2>{{admin.name}}</h2>
        <div>Role: <strong>{{admin.role}}</strong></div>
        <span>{{admin.count}} currently assigned.</span>
        <span>
          <button
            class="btn btn-sm btn-outline-secondary"
            @click="reassign(admin.byuId, admin.count)"
            >
            Reassign
          </button>
        </span>
        <div><button
            class="btn btn-sm btn-outline-primary"
            @click="viewList(admin.byuId)"
            >
            View List
        </button></div>
      </div>
    </div>
    <Report
      :baseUrl="baseUrl"
      reportName="adminAssignments"
      load-data
      @reportData="dataLoaded"
      hide-description
    />
    <v-dialog />
    <AssignmentBulkDialog />
  </section>
</template>
<script>
  import AssignmentBulkDialog from './AssignmentBulkDialog'
  import Report from './Report'

  import { mapState, mapGetters } from 'vuex'

  export default {
    name: 'AdminReport',
    components: {
      AssignmentBulkDialog,
      Report
    },
    props: {
      baseUrl: {
        type: String,
        required: true
      },
      detailPath: {
        type: String,
        default: '/list/'
      }
    },
    data() {
      return {
        admins: []
      }
    },
    computed: {
      ...mapGetters(['loading']),
      ...mapState({
        errorText: state => state.apiError.message
      })
    },
    methods: {
      reassign (byuId, count) {
        this.$modal.show('assignment-bulk-modal', { byuId, count })
      },
      viewList (byuId) {
        this.$router.push(`${this.detailPath}${byuId}`)
      },
      dataLoaded (e) {
        console.log(`dataLoaded`)
        console.log(`e=${e}`)
        const { data } = e
        console.log(`data=${data}`)
        this.admins = data.map(r => {
          const [count, name, role, byuId] = r
          return { count, name, role, byuId }
        })
      }
    }
  }
</script>
<style scoped>
  .card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    grid-auto-rows: auto;
    grid-gap: 0.5rem;
  }

  .admin-card {
    border: thin solid var(--light);
    padding: 0.5rem;
    box-shadow: 0rem 0.05rem 0.5rem rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    grid-gap: 0.5rem;
  }

  .admin-card > * {
    grid-column: auto / span 2
  }

  .admin-card > span {
    grid-column: auto / span 1
  }

  .admin-card > h2 {
    background-color: var(--primary);
    color: var(--white);
    margin: -0.5rem;
    padding: 0.25rem 1rem;
  }
</style>
