<template>
  <div class="grid" v-if="filterDisplay">
    <span>Displaying Only:</span>
    <div class="filters">
      <span v-for="item of filterDisplay" :key="item">
        {{ item }}
      </span>
    </div>
    <slot></slot>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { yearTermLongFormat } from './dateTimeFormat'

export default {
  name: 'FilterBreadcrumb',
  props: {
    filters: {
      type: Array
    }
  },
  computed: {
    ...mapGetters(['usersById', 'packetListFilters']),
    filterDisplay() {
      const filters = this.filters || this.packetListFilters
      if (!filters || filters.length === 0) {
        return ''
      }

      const filterObjectToString = ({ type, value }) => {
        const values = value.split(',')
        if(values.length === 0) {
          return null
        }

        if (type === 'admitPeriod') {
          return `Admit Period${values.length > 1 ? 's' : ''}: ${values.map(yearTermLongFormat).join(', ')}`
        } else if (type === 'applicantType') {
          return `App Type${values.length > 1 ? 's' : ''}: ${values.join(', ')}`
        } else if (type === 'assignedTo') {
          return `Assigned To: ${values.map(id => this.usersById(id).name).join(' or ')}`
        } else if (type === 'sex') {
          return `Sex: ${values.join(' or ')}`
        } else if (type === 'population') {
          return `Population${values.length > 1 ? 's' : ''}: ${values.map(pop => {
            return {
              IA: 'International',
              HI: 'Hawaii',
              IW: 'iWork'
            }[pop] || 'Unknown'
          }).join(', ')}`
        } else if (type === 'act') {
          return `ACT: >= ${values.join(', ')}`
        } else if (type === 'gpa') {
          return `GPA: >= ${values.join(', ')}`
        } else if (type === 'cumulativeGpa') {
          return `Cumulative College GPA: >= ${values.join(', ')}`
        } else {
          const typeTitle = type.replace(/^\S/, letter => letter.toUpperCase())
          return `${typeTitle}: ${values.join(', ')}`
        }
      }

      return filters.map(filterObjectToString).filter(s => !!s)
    }
  }
}
</script>
<style scoped>
.grid {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr;
  align-items: center;
  padding-top: 0.5rem;
}
.filters {
  background-color: #e0e0e0;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
}
.filters > span:not(:first-child)::before {
  content: ' / ';
}
</style>
