<script setup lang="ts">
    import type { Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';

    const props = defineProps<{
        shift: Shift;
    }>();
    
    const getShiftColor = (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-10';
            case 'SICK':        return 'grey-8';
            default :           return 'transparent';
        }
    };

    const getTextColor = (type: string): string => {
        switch(type) {
            case 'REGULAR': return 'grey-8';
            case '':        return 'transparent';
            default:        return 'white';
        }
    }
</script>

<template>
    <q-card-section 
        horizontal
        class="q-pa-none text-uppercase text-center items-center cursor-pointer rounded-10"
        style="line-height: 1;"
    >
        <!-- 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-' + getShiftColor(props.shift.type) + ' text-' + getTextColor(props.shift.type)"
                style="font-size: 1.5em; line-height: 80% !important;"
            >
                {{ props.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="props.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-' + getShiftColor(props.shift.type) + ' text-' + getTextColor(props.shift.type)"
                style="font-size: 1.5em; line-height: 80% !important;"
            >
                {{ props.shift.end_time }}
            </q-item-label>
        </q-card-section>

        <!-- comment and expenses buttons -->
        <q-card-section
            class="col q-pa-none text-right"
        >
            <!-- chat_bubble_outline or announcement -->
            <q-btn
                v-if="props.shift.type !== ''"
                flat 
                dense
                color='grey-8'
                icon="chat_bubble_outline"
                class="q-pa-none"
            />

            <!-- insert_drive_file or request_quote -->
            <q-btn
                v-if="props.shift.type !== ''"
                flat 
                dense
                color='grey-8'
                icon="attach_money"        
                class="q-pa-none q-mx-xs"
            /> 
        </q-card-section>
    </q-card-section>
</template>