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

/* eslint-disable */
    const props = defineProps<{
        shift: Shift;
    }>();

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

    const has_comment = computed(()=> {
        const comment = (props.shift as any).description ?? (props.shift as any).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 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-10';
            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 on_click_edit    = (type: string) => {
    if(type !== '') { emit('request-edit', { shift: props.shift })};
}
const on_click_delete  = () => emit('request-delete', { shift: props.shift });

</script>

<template>
    <q-card-section 
        horizontal
        class="q-pa-none text-uppercase text-center items-center rounded-10"
        :class="props.shift.type === '' ? '': 'cursor-pointer'"
        style="line-height: 1;"
        @click.stop="on_click_edit(props.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(props.shift.type) + ' text-' + get_text_color(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-' + get_shift_color(props.shift.type) + ' text-' + get_text_color(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"
        >
            <!-- comment btn -->
            <q-icon
                v-if="props.shift.type !== ''"
                :name="comment_icon"
                :color="comment_color"
                class="q-pa-none q-mx-xs"
                size="sm"
            />
            <!-- expenses btn -->
            <q-btn
                v-if="props.shift.type !== ''"
                flat 
                dense
                color='grey-8'
                icon="attach_money"        
                class="q-pa-none q-mx-xs"
            /> 
            <!-- delete btn -->
            <q-btn
                v-if="props.shift.type !== ''"
                push
                dense
                size="sm"
                color="red-6"
                icon="close"
                class="q-ml-xs"
                @click.stop="on_click_delete"
            />
        </q-card-section>
    </q-card-section>
</template>