<template>
  <div>
    <v-list>
      <template v-for="(opt, i) in userOptions">
        <v-list-tile
          v-if="opt.condition()"
          @click="opt.action"
          :key="i"
        >
          {{opt.display}}
        </v-list-tile>
      </template>
    </v-list>
    <component v-if="displayComponent" :is="displayComponent" @hide="hideComponent"/>
  </div>
</template>

<script>
import PasswordChangeDialog from '@/components/PasswordChangeDialog'
import { Authentication } from '@/store/modules/authentication'
import { deleteAllActiveAssignments } from '@/api'
export default {
  name: 'UserOptions',
  components: { PasswordChangeDialog },
  data () {
    return {
      displayComponent: null,
      userOptions: [
        {
          display: 'Change password',
          action: () => { this.displayComponent = PasswordChangeDialog },
          condition: () => !Authentication.isStudent
        },
        {
          display: 'Free all reserved submissions',
          action: deleteAllActiveAssignments,
          condition: () => Authentication.isReviewer
        }
      ]
    }
  },
  methods: {
    hideComponent () {
      this.displayComponent = null
    }
  }
}
</script>

<style scoped>

</style>