<template>
  <select
    v-if="viewedApplications && viewedApplications.length > 0"
    @input="redirect($event.target.value)"
    ref="select"
    class="form-control"
  >
    <option value="" class="text-light"><FontAwesomeIcon :icon="icon" />Recent Applications</option>
    <option v-for="app of viewedApplications" :value="app.appId">{{app.name}}</option>
  </select>
</template>
<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faHistory } from '@fortawesome/free-solid-svg-icons'

import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  name: 'RecentApplications',
  components: { FontAwesomeIcon },
  computed: {
    ...mapState({
      viewedApplications: state => state.ui.viewedApplications
    }),
    icon () {
      return faHistory
    }
  },
  methods: {
    ...mapMutations(['viewApplication']),
    ...mapActions(['loadUiSettings']),
    redirect(appId) {
      if(appId) {
        this.$router.push('/review/detail/' + appId)
      }
    }
  },
  watch: {
    $route: {
      deep: true,
      immediate: true,
      handler () {
        if(this.$refs.select) {
          this.$refs.select.value = ''
        }
      }
    }
  },
  created () {
    this.loadUiSettings()
  }
}
</script>
