<script
    setup
    lang="ts"
>
    /* eslint-disable*/
    import { onBeforeUnmount, onMounted, ref, toRaw, useTemplateRef } from 'vue';
    import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
    import { useI18n } from 'vue-i18n';
    import { QSelect } from 'quasar';
    import { Shift, ShiftType } from 'src/modules/timesheets/models/shift.models';
    import { useUiStore } from 'src/stores/ui-store';

    const { t } = useI18n();
    const ui_store = useUiStore();

    interface ShiftOption {
        label: string; 
        value: ShiftType;
        icon: string; 
        icon_color: string;
    }

    const COMMENT_LENGTH_MAX = 280;
    const SHIFT_OPTIONS: ShiftOption[] = [
        { label: t('timesheet.shift.types.REGULAR'), value: 'REGULAR', icon: 'wb_sunny', icon_color: '' },
        { label: t('timesheet.shift.types.EVENING'), value: 'EVENING', icon: 'bedtime', icon_color: 'indigo-8' },
        { label: t('timesheet.shift.types.EMERGENCY'), value: 'EMERGENCY', icon: 'ring_volume', icon_color: 'red-8' },
        { label: t('timesheet.shift.types.VACATION'), value: 'VACATION', icon: 'beach_access', icon_color: 'yellow-8' },
        { label: t('timesheet.shift.types.HOLIDAY'), value: 'HOLIDAY', icon: 'forest', icon_color: 'green-8' },
        { label: t('timesheet.shift.types.SICK'), value: 'SICK', icon: 'medication_liquid', icon_color: 'cyan-8' },
    ];

    const shift = defineModel<Shift>('shift', { required: true });
    const { dense = false, outlined = false } = defineProps<{
        dense?: boolean;
        outlined?: boolean;
    }>();
    const emit = defineEmits<{
        'saveComment': [comment: string, shift_id: number];
        'requestDelete': [void];
    }>();

    const is_showing_time_picker = ref(false);
    const select_ref = useTemplateRef<QSelect>('select');
    const initial_shift = ref<Shift>(unwrapAndClone(toRaw(shift.value)))
    let timer: NodeJS.Timeout;

    const shift_type_selected = ref(SHIFT_OPTIONS.find(option => option.value == shift.value.type));

    const onBlurShiftTypeSelect = () => {
        if (shift_type_selected.value === undefined) {
            shift.value.type = 'REGULAR';
            shift.value.id = 0;
            emit('requestDelete');
        }
    };

    const slideDeleteShift = async (reset: () => void) => {
        timer = setTimeout(() => {
            reset();
            emit('requestDelete');
        }, 200);
    };

    const getCommentCounterColor = (comment_length: number) => {
        if (comment_length < 200) return 'primary';
        if (comment_length < 250) return 'warning';
        return 'negative';
    };

    onMounted(() => {
        if (ui_store.focus_next_component) {
            select_ref.value?.focus();
            select_ref.value?.showPopup();
            shift_type_selected.value = undefined;
            ui_store.focus_next_component = false;
        }
    });

    onBeforeUnmount(() => {
        clearTimeout(timer);
    });
</script>

<template>
    <q-slide-item

        right-color="negative"
        class="q-my-xs rounded-5 bg-transparent"
        @right="details => slideDeleteShift(details.reset)"
    >
        <template
            #right
            v-if="ui_store.is_mobile_mode"
        >
            <q-icon name="delete" />
        </template>

        <div
            class="row flex-center text-uppercase rounded-5 bg-transparent"
        >
            <!-- shift type -->
            <q-select
                ref="select"
                v-model="shift_type_selected"
                standout="bg-blue-grey-9"
                dense
                :readonly="shift.is_approved"
                :options-dense="!ui_store.is_mobile_mode"
                hide-dropdown-icon
                :menu-offset="[0, 10]"
                menu-anchor="bottom middle"
                menu-self="top middle"
                :options="SHIFT_OPTIONS"
                class="rounded-5 q-mx-xs bg-dark"
                :class="(ui_store.is_mobile_mode ? 'col-12 q-mb-xs ' : 'col ')"
                popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
                popup-content-style="border: 2px solid var(--q-accent)"
                @blur="onBlurShiftTypeSelect"
                @update:model-value="option => shift.type = option.value"
            >
                <template #selected-item="scope">
                    <div
                        class="row flex-center text-weight-bold q-ma-none q-pa-none no-wrap ellipsis full-width"
                        :class="ui_store.is_mobile_mode ? 'items-center full-height' : 'flex-center'"
                        :tabindex="scope.tabindex"
                    >
                        <q-icon
                            :name="scope.opt.icon"
                            :color="scope.opt.icon_color"
                            size="sm"
                            class="col-auto q-mx-xs"
                        />
                        <span
                            style="line-height: 0.9em;"
                            class="col-auto ellipsis"
                        >{{ scope.opt.label }}</span>
                    </div>
                </template>
            </q-select>

            <!-- punch in field -->
            <q-input
                v-model="shift.start_time"
                dense
                :readonly="shift.is_approved"
                type="time"
                :standout="$q.dark.isActive ? 'bg-blue-grey-9' : 'bg-blue-grey-1 text-white'"
                label-slot
                label-color="accent"
                :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
                input-style="font-size: 1.2em;"
                class="col rounded-5 bg-dark"
                :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
            >
                <template #label>
                    <span
                        class="text-weight-bolder"
                        style="font-size: 0.95em;"
                    >{{ $t('shared.misc.in') }}</span>
                </template>
            </q-input>

            <!-- punch out field -->
            <q-input
                v-model="shift.end_time"
                dense
                :readonly="shift.is_approved"
                type="time"
                standout="bg-blue-grey-9"
                label-slot
                label-color="accent"
                :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
                input-style="font-size: 1.2em;"
                class="col rounded-5 bg-dark"
                :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-ml-xs ' : 'q-mx-xs ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
            >
                <template #label>
                    <span
                        class="text-weight-bolder"
                        style="font-size: 0.95em;"
                    >{{ $t('shared.misc.out') }}</span>
                </template>
            </q-input>

            <!-- comment and delete buttons -->
            <div :class="ui_store.is_mobile_mode ? 'col-12 row' : 'col-auto'">
                <q-icon
                    v-if="shift.type && dense"
                    :name="shift.comment ? 'comment' : ''"
                    color="primary"
                    :size="dense ? 'xs' : 'sm'"
                    class="col"
                />

                <q-btn
                    v-else
                    flat
                    dense
                    :icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
                    :text-color="shift.comment ? 'accent' : 'grey-5'"
                    class="col"
                    :class="ui_store.is_mobile_mode ? 'q-mt-xs bg-dark' : ''"
                >
                    <q-popup-edit
                        v-model="shift.comment"
                        :title="$t('timesheet.shift.fields.header_comment')"
                        auto-save
                        v-slot="scope"
                        class="bg-dark"
                    >
                        <q-input
                            color="white"
                            v-model="scope.value"
                            dense
                            :readonly="shift.is_approved"
                            autofocus
                            counter
                            bottom-slots
                            :maxlength="COMMENT_LENGTH_MAX"
                            class="q-pb-lg"
                            :class="shift.is_approved ? 'cursor-not-allowed' : ''"
                            @keyup.enter="scope.set"
                        >
                            <template #append>
                                <q-icon name="edit" />
                            </template>

                            <template #counter>
                                <div class="row flex-center">
                                    <q-space />
                                    <q-knob
                                        :model-value="scope.value?.length"
                                        readonly
                                        :max="COMMENT_LENGTH_MAX"
                                        size="1.6em"
                                        :thickness="0.4"
                                        :color="getCommentCounterColor(scope.value?.length ?? 0)"
                                        track-color="grey-4"
                                        class="col-auto q-mr-xs"
                                    />
                                    <span
                                        :class="'col-auto text-weight-bolder text-' + getCommentCounterColor(scope.value?.length ?? 0)"
                                    >{{ 280 - (scope.value?.length ?? 0) }}</span>
                                </div>
                            </template>
                        </q-input>
                    </q-popup-edit>
                </q-btn>

                <q-btn
                    v-if="!ui_store.is_mobile_mode"
                    flat
                    dense
                    :disable="shift.is_approved"
                    tabindex="-1"
                    icon="cancel"
                    text-color="negative"
                    class="col"
                    :class="shift.is_approved ? 'invisible' : ''"
                    @click="$emit('requestDelete')"
                />
            </div>
        </div>
    </q-slide-item>
</template>