<template>
	<div class="reminders">
		<div
			v-for="(r, index) in reminders"
			:key="index"
			:class="{ 'overdue': r.reminder < new Date() }"
			class="reminder-input"
		>
			<ReminderDetail
				v-model="reminders[index]"
				class="reminder-detail"
				:disabled="disabled"
				:default-relative-to="defaultRelativeTo"
				@update:modelValue="updateData"
			/>
			<BaseButton
				v-if="!disabled"
				class="remove"
				@click="removeReminderByIndex(index)"
			>
				<icon icon="times" />
			</BaseButton>
		</div>

		<ReminderDetail
			:disabled="disabled"
			:clear-after-update="true"
			:default-relative-to="defaultRelativeTo"
			@update:modelValue="addNewReminder"
		/>
	</div>
</template>

<script setup lang="ts">
import {ref, watch, computed} from 'vue'

import type {ITaskReminder} from '@/modelTypes/ITaskReminder'

import BaseButton from '@/components/base/BaseButton.vue'
import ReminderDetail from '@/components/tasks/partials/reminder-detail.vue'
import type {ITask} from '@/modelTypes/ITask'
import {REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'

const {
	modelValue,
	disabled = false,
} = defineProps<{
	modelValue: ITask,
	disabled?: boolean,
}>()

const emit = defineEmits(['update:modelValue'])

const reminders = ref<ITaskReminder[]>([])

watch(
	() => modelValue.reminders,
	(newVal) => {
		reminders.value = newVal
	},
	{immediate: true, deep: true}, // deep watcher so that we get the resolved date after updating the task
)

const defaultRelativeTo = computed(() => {
	if (typeof modelValue === 'undefined') {
		return null
	}
	
	if (modelValue?.dueDate) {
		return REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE
	}
	
	if (modelValue.dueDate === null && modelValue.startDate !== null) {
		return REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE
	}
	
	if (modelValue.dueDate === null && modelValue.startDate === null && modelValue.endDate !== null) {
		return REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE
	}
	
	return null
})

function updateData() {
	emit('update:modelValue', {
		...modelValue,
		reminders: reminders.value,
	})
}

function addNewReminder(newReminder: ITaskReminder) {
	if (newReminder === null) {
		return
	}
	reminders.value.push(newReminder)
	updateData()
}

function removeReminderByIndex(index: number) {
	reminders.value.splice(index, 1)
	updateData()
}
</script>

<style lang="scss" scoped>
.reminder-input {
	display: flex;
	align-items: center;

	&.overdue :deep(.datepicker .show) {
		color: var(--danger);
	}

	&::last-child {
		margin-bottom: 0.75rem;
	}
}

.reminder-detail {
	width: 100%;
}

.remove {
	color: var(--danger);
	vertical-align: top;
	padding-left: .5rem;
	line-height: 1;
}
</style>