<template>
  <v-card class="pa-6" :color="$vuetify.theme.dark ? 'primary' : 'txt'" flat>
    <v-card-title class="white--text lighten-1 font-weight-bold"
      >{{ $t('general.hi') }}
      {{ $auth.user.first_name | capitalize }}!</v-card-title
    >
    <v-card-text class="white--text text font-weight-light">
      <span v-if="hasNotifications">
        {{ $t('general.dashboard.current') }}
        <span
          class="warning--text mx-1"
          @click.stop="
            $store.commit('navigation/SWITCH_RIGHT_DRAWER', {
              component: 'Notifications',
            })
          "
          :style="{ cursor: 'pointer' }"
          >{{ notifications.length }} {{ $t('rightMenu.notes') }}</span
        >
        {{ $t('general.dashboard.require') }}<br
      /></span>

      <span v-if="$store.getters.isMember">
        Goed om je te zien. Update de lidmaatschapgegevens of bekijk de management informatie via de tegels hieronder of via het menu.</span>

      <span v-else>Welkom in je dashboard van MijnGGZEcademy. Klik op onderstaande tegels of navigeer via het menu linksboven in je scherm.<br /><br />
      Succes!</span>

      <span v-if="$auth.user.last_login_at">
        De laatste keer heb je ingelogd op
        {{ formatDate($auth.user.last_login_at) }}. Fijne dag!
      </span>
    </v-card-text>
    <v-img
      class="img plant"
      :src="require(`@/assets/img/plant.png`)"
      contain
    ></v-img>
    <v-img
      class="img cat"
      :src="require(`@/assets/img/cat.png`)"
      contain
    ></v-img>
  </v-card>
</template>

<script>
import dayjs from 'dayjs'
import nl from 'dayjs/locale/nl'

export default {
  computed: {
    notifications() {
      return this.$store.getters.notifications
    },
    hasNotifications() {
      return this.$store.getters.hasNotifications
    },
  },
  methods: {
    formatDate(date) {
      dayjs.locale('nl')
      return dayjs(date).format('dddd D MMMM YYYY').toLowerCase()
    },
  },
}
</script>

<style lang="scss" scoped>
.text {
  width: 650px;
  color: white !important;
}
.img {
  position: absolute;
}
.plant {
  right: -35px;
  top: -21px;
}
.cat {
  right: 150px;
  top: -96px;
}
</style>
