<template>
  <q-card style="text-align: center;">
    <q-card-section class="row justify-center content-stretch">
      <div class="col-4">
        <q-avatar style="width: 100%; height: auto;">
          <img :src="avatarLink" />
        </q-avatar>
      </div>
      <div class="col-8">
        <span class="text-h6">Hallo {{ name }}</span><br />
        <span v-if="hasBirthday">Herzlichen Glückwunsch zum Geburtstag!<br /></span>
        <span v-if="birthday.length > 0">Heute <span v-if="birthday.length === 1">hat </span><span v-else>haben </span><span
            v-for="(user, index) in birthday"
            v-bind:key="index"
          >{{user.display_name}}<span v-if="index < (birthday.length-1)">, </span></span> Geburtstag.</span>
        <span v-else>Heute stehen keine Geburtstage an</span>
      </div>
    </q-card-section>
  </q-card>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  ref,
} from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import MD5 from 'crypto-js/md5';

export default defineComponent({
  name: 'Greeting',
  setup(_, { root }) {
    const store = <Store<StateInterface>>root.$store;
    onMounted(() => store.dispatch('user/getUsers', false));

    const avatarLink = computed(() => {
      const hash = MD5(store.state.user.currentUser?.mail || '').toString();
      return `https://www.gravatar.com/avatar/${hash}?s=500&d=robohash`;
    });

    const name = ref(store.state.user.currentUser?.display_name);

    function userHasBirthday(user: FG.User) {
      const today = new Date();
      return (
        user.birthday &&
        user.birthday.getMonth === today.getMonth &&
        user.birthday.getDate === today.getDate
      );
    }

    const hasBirthday = computed(() => {
      return userHasBirthday(<FG.User>store.state.user.currentUser);
    });

    const birthday = computed(() =>
      store.state.user.users
        .filter(userHasBirthday)
        .filter((user) => user.userid !== store.state.user.currentUser?.userid)
    );

    return { avatarLink, name, hasBirthday, birthday };
  },
});
</script>