<script
    setup
    lang="ts"
>
    import type { EmployeeProfile } from 'src/modules/employee-list/models/employee-profile.models';

    // const getEmployeeAvatar = (first_name: string, last_name: string) => {
    //     // add logic here to see if user has an avatar image and return that instead of initials
    //     return first_name.charAt(0) + last_name.charAt(0);
    // };

    const { row, index = 0 } = defineProps<{
        row: EmployeeProfile
        index?: number
    }>()
    const emit = defineEmits<{
        onProfileClick: [email: string]
    }>();
</script>

<template>
    <transition
        appear
        enter-active-class="animated fadeInUp slow"
        mode="out-in"
    >
        <q-card
            v-ripple
            class="column col-xs-6 col-sm-4 col-md-3 col-lg-2 no-wrap rounded-15 cursor-pointer q-ma-sm"
            style="max-width: 230px;"
            :style="`animation-delay: ${index / 25}s;`"
            @click="emit('onProfileClick', row.email)"
        >
            <q-card-section class="col-6 text-center">
                <q-avatar
                    :color="row.last_work_day === undefined ? 'accent' : 'negative'"
                    size="8em"
                    class="shadow-3 q-mb-md"
                >
                    <img
                        src="src/assets/targo-default-avatar.png"
                        alt="employee avatar"
                        class="q-pa-xs"
                    >
                </q-avatar>
            </q-card-section>

            <q-card-section
                class="col-grow text-center text-h6 text-weight-medium text-uppercase q-pb-none"
                style="line-height: 0.8em;"
            >
                <div
                    class="ellipsis"
                    :class="row.last_work_day === undefined ? 'text-accent' : 'text-negative'"
                > 
                    {{ row.first_name }} {{ row.last_name }}
                </div>
                <q-separator
                    color="accent"
                    class="q-mx-sm q-mt-xs"
                />
                <div class=" ellipsis-2-lines text-caption">{{ row.job_title }}</div>
            </q-card-section>

            <q-card-section class="bg-primary text-white text-caption text-center q-py-none col-2 content-center">
                <div> {{ row.email }} </div>
            </q-card-section>
        </q-card>
    </transition>
</template>