<template>
	<p class="created">
		<i18n-t keypath="task.detail.created">
			<span v-tooltip="formatDate(task.created)">{{ formatDateSince(task.created) }}</span>
			{{ task.createdBy.getDisplayName() }}
		</i18n-t>
		<template v-if="+new Date(task.created) !== +new Date(task.updated)">
			<br/>
			<!-- Computed properties to show the actual date every time it gets updated -->
			<i18n-t keypath="task.detail.updated">
				<span v-tooltip="updatedFormatted">{{ updatedSince }}</span>
			</i18n-t>
		</template>
		<template v-if="task.done">
			<br/>
			<i18n-t keypath="task.detail.doneAt">
				<span v-tooltip="doneFormatted">{{ doneSince }}</span>
			</i18n-t>
		</template>
	</p>
</template>

<script lang="ts" setup>
import {computed, toRefs} from 'vue'
import TaskModel from '@/models/task'
import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'

const props = defineProps({
	task: {
		type: TaskModel,
		required: true,
	},
})

const {task} = toRefs(props)

const updatedSince = computed(() => formatDateSince(task.value.updated))
const updatedFormatted = computed(() => formatDateLong(task.value.updated))
const doneSince = computed(() => formatDateSince(task.value.doneAt))
const doneFormatted = computed(() => formatDateLong(task.value.doneAt))
</script>
