<script setup lang="ts">
    import { computed } from 'vue';
    import type { Shift } from 'src/modules/timesheets/models/shift.models';


    const { shift, dense = false } = defineProps<{
        shift: Shift;
        dense?: boolean;
    }>();

    const emit = defineEmits<{
        'save-comment': [comment: string, shift: Shift];
        'request-update': [shift: Shift];
        'request-delete': [shift: Shift];
    }>();

    const has_comment = computed(() => {
        const comment = shift.comment ?? '';
        return typeof comment === 'string' && comment.trim().length > 0;
    })
    const comment_icon = computed(() => (has_comment.value ? 'announcement' : 'chat_bubble_outline'));
    const comment_color = computed(() => (has_comment.value ? 'primary' : 'grey-8'));
    const hour_font_size = computed(() => dense ? '0.9em' : '1.5em' )

    const get_shift_color = (type: string): string => {
        switch (type) {
            case 'REGULAR': return 'secondary';
            case 'EVENING': return 'warning';
            case 'EMERGENCY': return 'amber-10';
            case 'OVERTIME': return 'negative';
            case 'VACATION': return 'purple-10';
            case 'HOLIDAY': return 'purple-5';
            case 'SICK': return 'grey-8';
            default: return 'transparent';
        }
    };

    const get_text_color = (type: string): string => {
        switch (type) {
            case 'REGULAR': return 'grey-8';
            case '': return 'grey-5';
            default: return 'white';
        }
    }

    const onClickUpdate = (type: string) => {
        if (type !== '') { emit('request-update', shift) };
    }

    const onClickDelete = () => emit('request-delete', shift);
</script>

<template>
    <q-card-section
        horizontal
        class="q-pa-none text-uppercase text-center items-center rounded-10"
        :class="shift.type"
        style="line-height: 1;"
        @click.stop="onClickUpdate(shift.type)"
    >
        <!-- punch-in timestamps -->
        <q-card-section class="q-pa-none col">
            <q-item-label
                class="text-weight-bolder q-pa-xs rounded-5"
                :class="'bg-' + get_shift_color(shift.type) + ' text-' + get_text_color(shift.type)"
                :style="'font-size: ' + hour_font_size + '; line-height: 80% !important;'"
            >
                {{ shift.start_time }}
            </q-item-label>
        </q-card-section>

        <!-- arrows pointing to punch-out timestamps -->
        <q-card-section
            horizontal
            class="items-center justify-center q-mx-sm col"
        >
            <div
                v-for="icon_data, index in [
                    { transform: 'transform: translateX(5px);', color: 'accent' },
                    { transform: 'transform: translateX(-5px);', color: 'primary' }]"
                :key="index"
            >
                <q-icon
                    v-if="shift.type"
                    name="double_arrow"
                    :color="icon_data.color"
                    size="24px"
                    :style="icon_data.transform"
                />
            </div>
        </q-card-section>

        <!-- punch-out timestamps -->
        <q-card-section class="q-pa-none col">
            <q-item-label
                class="text-weight-bolder text-white q-pa-xs rounded-5"
                :class="'bg-' + get_shift_color(shift.type) + ' text-' + get_text_color(shift.type)"
                style="font-size: 1.5em; line-height: 80% !important;"
            >
                {{ shift.end_time }}
            </q-item-label>
        </q-card-section>

        <!-- comment and expenses buttons -->
        <q-card-section class="col q-pa-none text-right">
            <!-- comment btn -->
            <q-icon
                v-if="shift.type"
                :name="comment_icon"
                :color="comment_color"
                class="q-pa-none q-mx-xs"
                size="sm"
            />
            <!-- expenses btn -->
            <q-btn
                v-if="shift.type"
                flat
                dense
                color='grey-8'
                icon="attach_money"
                class="q-pa-none q-mx-xs"
            />
            <!-- delete btn -->
            <q-btn
                v-if="shift.type"
                push
                dense
                size="sm"
                color="red-6"
                icon="close"
                class="q-ml-xs"
                @click.stop="onClickDelete"
            />
        </q-card-section>
    </q-card-section>
</template>