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

    const q = useQuasar();
    const is_mouseover = ref(false);

    const { row, index = -1, isManagement = false } = defineProps<{
        row: EmployeeProfile
        index?: number
        isManagement?: boolean;
    }>()

    defineEmits<{
        onProfileClick: [email: string]
    }>();

    const getItemStyle = (): string => {
        const active_style = row.last_work_day === null ? '' : 'opacity: 0.6;';
        const dark_style = q.dark.isActive ? 'border: 2px solid var(--q-accent);' : '';
        const hover_style = isManagement ? (is_mouseover.value ? `transform: scale(1.1); z-index: 2;` :'transform: scale(1) skew(0)') : '';

        return `${active_style} ${dark_style} ${hover_style}`;
    }
</script>

<template>
    <div
        class="col-xs-6 col-sm-4 col-md-3 col-lg-3 col-xl-2 q-pa-sm row flex-center"
        :style="`animation-delay: ${index / 25}s;`"
    >
        <div
            class="column col no-wrap bg-dark rounded-15 shadow-12"
            :class="isManagement ? 'cursor-pointer item-mouse-hover' : ''"
            style="max-width: 230px; height: 275px;"
            :style="getItemStyle()"
            @click="$emit('onProfileClick', row.email)"
            @mouseenter="is_mouseover = true"
            @mouseleave="is_mouseover = false"
        >
            <div class="col-auto column flex-center q-pt-md">
                <q-avatar
                    :color="row.last_work_day === null ? 'accent' : 'negative'"
                    size="8em"
                    class="col-auto shadow-3"
                >
                    <img
                        src="src/assets/targo-default-avatar.png"
                        alt="employee avatar"
                        class="q-pa-xs"
                    >
                </q-avatar>
            </div>

            <div
                class="col column items-center justify-start text-center text-weight-medium text-uppercase q-pa-sm no-wrap"
                style="line-height: 1.2em; font-size: 1.3em;"
            >
                <div
                    class="ellipsis-2-lines"
                    :class="row.last_work_day === null ? 'text-accent' : 'text-negative'"
                >
                    {{ row.first_name }} {{ row.last_name }}

                    <q-separator class="q-mb-xs q-mx-md" />
                </div>
                <div class=" ellipsis-2-lines text-caption no-wrap">{{ row.job_title }}</div>
            </div>

            <div
                class="col-auto bg-primary text-white text-caption text-center text-weight-medium q-py-sm"
                style="border-radius: 0 0 15px 15px;"
            >
                {{ row.email }}
            </div>
        </div>
    </div>
</template>

<style lang="css" scoped>
    .item-mouse-hover {
        transition: all 0.2s ease-out;
    }
</style>