<script setup>
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';

import useNotify from 'src/composables/useNotify.js';
import { useVnConfirm } from 'composables/useVnConfirm';
import { toTimeFormat } from 'filters/date.js';
import axios from 'axios';

const $props = defineProps({
    id: {
        type: Number,
        required: true,
    },
    manual: {
        type: Boolean,
        required: true,
    },
    hour: {
        type: String,
        required: true,
    },
    direction: {
        type: String,
        required: true,
        default: null,
    },
});

const emit = defineEmits(['onHourEntryDeleted', 'showWorkerTimeForm']);

const { t } = useI18n();
const { notify } = useNotify();
const { openConfirmationModal } = useVnConfirm();

const directionIconTooltip = computed(() => {
    const tooltipDictionary = {
        in: t('Entrada'),
        out: t('Salida'),
    };
    return tooltipDictionary[$props.direction] || null;
});

const directionIconName = computed(() => {
    const tooltipDictionary = {
        in: 'arrow_forward',
        out: 'arrow_back',
    };
    return tooltipDictionary[$props.direction] || null;
});

const deleteHourEntry = async () => {
    try {
        const { data } = await axios.post(
            `WorkerTimeControls/${$props.id}/deleteTimeEntry`
        );

        if (!data) return;
        emit('onHourEntryDeleted');
        notify('Entry removed', 'positive');
    } catch (err) {
        console.error('Error deleting hour entry');
    }
};

const showWorkerTimeForm = () => emit('showWorkerTimeForm');
</script>

<template>
    <div class="row items-center no-wrap">
        <QIcon class="direction-icon" :name="directionIconName" size="sm">
            <QTooltip>{{ directionIconTooltip }}</QTooltip>
        </QIcon>
        <QBadge
            rounded
            class="chip"
            :class="{ '--manual': manual }"
            @click="showWorkerTimeForm()"
        >
            <QIcon name="edit" size="sm" class="fill-icon">
                <QTooltip>{{ t('Edit') }}</QTooltip></QIcon
            >
            <span class="q-px-sm text-subtitle2 text-weight-regular">{{
                toTimeFormat(hour)
            }}</span>
            <QIcon
                v-if="manual"
                name="cancel"
                class="remove-icon"
                size="sm"
                @click.stop="
                    openConfirmationModal(
                        t('This time entry will be deleted'),
                        t('Are you sure you want to delete this entry?'),
                        deleteHourEntry
                    )
                "
            />
        </QBadge>
    </div>
</template>

<style scoped lang="scss">
.chip {
    height: 28px;
    cursor: pointer;
    opacity: 0.8;
    color: #eee;
    background-color: #222;

    &.--manual {
        color: var(--vn-accent-color);
        background-color: $primary;
    }

    &:hover {
        opacity: 1;
    }
}

.direction-icon {
    color: var(--vn-label-color);
    margin-right: 6px;
}

.remove-icon {
    cursor: pointer;

    &:hover {
        font-variation-settings: 'FILL' 1;
    }
}
</style>

<i18n>
es:
    Entrada: Entrada
    Salida: Salida
    Edit: Editar
    This time entry will be deleted: Se eliminará la hora fichada
    Are you sure you want to delete this entry?: ¿Seguro que quieres eliminarla?
    Entry removed: Fichada borrada
</i18n>
