<template>
  <Link :href="allReservationsLink" :inline="false">
    <Button class="all-reservations-button">
      {{ $_tr('allReservationsButton') }}
    </Button>
  </Link>
</template>

<script>
import moment from 'moment'
import checkRolesMixin from '../../mixins/check-roles-mixin'

import { Button, Link } from 'inside-collection/components'

export default {
  name: 'SeeAllReservationsButton',
  $_i18nRootPath: 'customs.RESERVATIONS.AGENDA',
  components: { Button, Link },
  mixins: [checkRolesMixin],
  computed: {
    allReservationsLink() {
      return {
        name: 'AllReservationsListingPage',
        query: { date: this.unixDate }
      }
    },
    checkRole() {
      // roles are allowed to see the button
      const allowedRoles = [
        'super_administrator',
        'catering_services_team',
        'information_technologies_team',
        'reception_team'
      ]

      // current user roles
      const currentRoles = this.getCheckedData(
        this.getUserInfos,
        ['permissions', 'roles'],
        []
      )

      return allowedRoles.some(role => currentRoles.includes(role))
    },
    unixDate() {
      const date = moment(this.getStore('getSelectedDate'))
      return date.isValid() ? date.format('X') : moment().format('X')
    }
  }
}
</script>
