<script
    setup
    lang="ts"
>
    import { computed, ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import type { ShiftLegendItem } from 'src/modules/timesheets/models/shift.models';

    const { t } = useI18n();
    const is_showing_legend = ref(false);

    const legend: ShiftLegendItem[] = [
        { type: 'REGULAR', color: 'secondary', label_type: 'timesheet.shift.types.REGULAR' },
        { type: 'EVENING', color: 'warning', label_type: 'timesheet.shift.types.EVENING' },
        { type: 'EMERGENCY', color: 'amber-10', label_type: 'timesheet.shift.types.EMERGENCY' },
        { type: 'VACATION', color: 'purple-10', label_type: 'timesheet.shift.types.VACATION' },
        { type: 'HOLIDAY', color: 'purple-5', label_type: 'timesheet.shift.types.HOLIDAY' },
        { type: 'SICK', color: 'grey-8', label_type: 'timesheet.shift.types.SICK' },
    ]

    const shift_type_legend = computed(() =>
        legend.map(item => ({ ...item, label: t(item.label_type) }))
    );

</script>

<template>
    <div
        class="items-center"
        :class="$q.screen.lt.md ? 'column' : 'row'"
    >
        <q-btn
            flat
            dense
            rounded
            color="primary"
            class="col-auto q-my-sm"
            @click="is_showing_legend = !is_showing_legend"
        >
            <template #default>
                <q-icon
                    :name="is_showing_legend ? 'close' : 'info_outline'"
                    size="md"
                    class="col-auto"
                />
            </template>
        </q-btn>

        <transition
            appear
            enter-active-class="animated fadeIn"
            leave-active-class="animated fadeOut"
            class="col-auto"
        >
            <div
                v-if="is_showing_legend"
                class="q-py-xs bg-white rounded-5 shadow-2 text-center q-my-xs"
            >
                <q-badge
                    v-for="shift_type in shift_type_legend"
                    :key="shift_type.type"
                    :color="shift_type.color"
                    :label="shift_type.label"
                    :text-color="shift_type.text_color || 'white'"
                    class="q-pa-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
                    style="font-size: 0.8em;"
                />
            </div>
        </transition>
    </div>
</template>