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

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

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

    const is_showing_highlight = computed(() => isManagement && is_mouseover.value)

    const emit = 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);' : '';

        return `${active_style} ${dark_style}`;
    }

    const onProfileClick = (email: string) => {
        is_mouseover.value = false;
        emit('onProfileClick', email)
    };
</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 relative-position"
            :class="isManagement ? 'cursor-pointer item-mouse-hover' : ''"
            style="height: 275px;"
            :style="getItemStyle()"
            @click="onProfileClick(row.email)"
            @mouseenter="is_mouseover = true"
            @mouseleave="is_mouseover = false"
        >
            <!-- highlight component for mouseover -->
            <div v-if="is_showing_highlight" class="absolute-full bg-accent rounded-15 z-top" style="opacity: 0.3;"></div>

            <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-px-sm q-pt-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="col-auto ellipsis-2-lines text-caption no-wrap">{{ row.job_title }}</div>
            </div>

            <div
                class="col-auto column items-center bg-primary text-white text-caption text-center q-py-xs"
                style="border-radius: 0 0 15px 15px;"
            >
                <div
                    class="col-auto row flex-center text-weight-light text-italic"
                    style="font-size: 1em;"
                >
                    <q-icon
                        name="las la-phone"
                        size="xs"
                        color="accent"
                        class="col-auto"
                    />
                    <span class="col-auto">{{ row.phone_number }}</span>
                </div>

                <span class="col-auto text-italic">extension: </span>

                <span class="col-auto text-weight-medium">{{ row.email }}</span>
            </div>
        </div>
    </div>
</template>

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