<template>
  <modal
  name="assignment-bulk-modal"
  height="auto"
  draggable
  @before-open="beforeOpen"
  >
    <div class="bg-light p-1 text-uppercase">Bulk Reassignment</div>
    <div class="assignment-buld-dialog content-padding">
      <div v-if="bulkChange.total !== bulkChange.complete">
        <h3>Reassigning...({{ bulkChange.complete }}/{{ bulkChange.total }})</h3>
        <div class="progress">
          <div class="progress-bar bg-primary"
               role="progressbar"
               :aria-valuenow="bulkChange.complete"
               aria-valuemin="0"
               :aria-valuemax="bulkChange.total"
               :style="`width: ${changePercent}%`"
               ></div>
        </div>
      </div>
      <div class="grid" v-else-if="count > 0">
        <span>{{count}} currently assigned</span>

        <div class="slider">
          <label for="reassignCount">Number to reassign</label>
          <input type="range" id="reassignCount" min="0" :max="count" v-model="numToAssign" step="1">
          <div class="centered">{{numToAssign}}</div>
        </div>

        <div>
          <label for="assignee">Assign To</label>
          <select id="assignee" v-model="assignTo">
            <option
            v-for="user in users"
            :key="user.byuId"
            :value="user.byuId"
            >{{user.name}}</option>
          </select>
        </div>
      </div>
      <div class="" v-else-if="reassignList.length > 0">
        <div>
          <label for="assignee">Assign To</label>
          <select id="assignee" v-model="assignTo">
            <option
            v-for="user in users"
            :key="user.byuId"
            :value="user.byuId"
            >{{user.name}}</option>
          </select>
        </div>
        <div>
          <span
             v-for="app of reassignList"
             :key="app.application_uuid"
             class="badge badge-pill badge-primary mr-1"
          >
            {{ app.applicant_name }}
          </span>
        </div>
      </div>
      <div v-else>
        Nothing to reassign
      </div>

      <span class="modal-footer">
        <button
          class="btn btn-outline-primary"
          @click="reassign"
          :disabled="numToAssign <= 0 || byuId === assignTo || !assignTo || bulkChange.total !== bulkChange.complete"
        >Reassign</button>
        <button class="btn btn-outline-secondary" @click="close">Cancel</button>
      </span>
    </div>
  </modal>
</template>
<script>
  import { mapActions } from 'vuex'

  export default {
    name: 'AssignmentBulkDialog',
    data () {
      return {
        byuId: '',
        count: 0,
        numToAssign: 0,
        assignTo: '',
        reassignList: []
      }
    },
    computed: {
      users () {
        const counselors = this.$store.getters.usersByRole('Counselor')
        const processors = this.$store.getters.usersByRole('Processor')
        return counselors.concat(processors)
      },
      bulkChange () {
        return this.$store.state.users.bulkChange
      },
      changePercent () {
        const { complete, total } = this.bulkChange
        return 100 * complete / total
      }
    },
    methods: {
      ...mapActions(['bulkReassignApplications']),
      beforeOpen ({params}) {
        console.log(params)
        const { byuId, count, reassignList = [] } = params
        this.byuId = byuId
        this.assignTo = byuId
        this.count = count
        this.reassignList = reassignList
        this.numToAssign = count
      },
      async reassign () {
        const { numToAssign, assignTo, reassignList } = this
        await this.bulkReassignApplications({
          fromId: this.byuId,
          toId: assignTo,
          count: numToAssign,
          appIds: reassignList.map(app => app.application_uuid)
        })
        window.location.reload()
      },
      close () {
        this.$modal.hide('assignment-bulk-modal')
      },
    }
  }
</script>
<style scoped>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    grid-gap: 0.5rem;
  }

  .slider {
    grid-row: auto / span 2;
    display: grid;
    grid-template-columns: auto;
    grid-auto-rows: auto;
    grid-gap: 0.2rem;
    justify-content: center;
  }

  .centered {
    text-align: center;
  }
</style>
