<!--
	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
	SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<div>
		<h4>{{ state }} {{ event.name }}</h4>
		<DiffFieldString
			title="Name"
			:before="event.serverName"
			:after="event.name"
			:state
		/>
		<DiffFieldString
			title="Timetable Name"
			:before="event.serverTimetableName"
			:after="event.timetableName"
			:state
		/>
		<DiffFieldString
			title="Host"
			:before="event.serverHost"
			:after="event.host"
			:state
		/>
		<DiffFieldString
			title="Public"
			:before='event.serverCrew ? "No" : "Yes"'
			:after='event.crew ? "No" : "Yes"'
			:state
		/>
		<DiffFieldString
			title="Notice"
			:before="event.serverNotice"
			:after="event.notice"
			:state
		/>
		<DiffFieldString
			title="Description"
			:before="event.serverDescription"
			:after="event.description"
			:state
		/>
		<DiffScheduleEventSlot
			v-for="[state, slot] in slots"
			:key="slot.id"
			:slot
			:schedule
			:state
		/>
	</div>
</template>

<script lang="ts" setup>
const props = defineProps<{
	event: ClientScheduleEvent,
	schedule: ClientSchedule,
}>();
const state = computed(() => {
	if (props.event.deleted) return "deleted";
	if (props.event.isNew()) return "created";
	return "modified";
});
const slots = computed((): [
	"deleted" | "created" | "modified", ClientScheduleEventSlot
][] => {
	const afterIds = props.event.slotIds;
	const beforeIds = props.event.serverSlotIds;
	if (state.value === "deleted") {
		return (
			[...beforeIds]
				.map(id => props.schedule.eventSlots.get(id))
				.filter(slot => slot !== undefined)
				.map(slot => ["deleted", slot] as ["deleted", ClientScheduleEventSlot])
		);
	}
	if (state.value === "created") {
		return (
			[...afterIds]
				.map(id => props.schedule.eventSlots.get(id))
				.filter(slot => slot !== undefined)
				.map(slot => ["created", slot] as ["created", ClientScheduleEventSlot])
		);
	}
	const added = [...toRaw(afterIds).difference(beforeIds)]
		.map(id => props.schedule.eventSlots.get(id))
		.filter(slot => slot !== undefined)
		.filter(slot => !slot.deleted)
		.map(slot => ["created", slot] as ["created", ClientScheduleEventSlot])
	;
	const removed = [...new Set(
		[...toRaw(beforeIds).difference(afterIds)]
			.map(id => props.schedule.eventSlots.get(id))
			.filter(slot => slot !== undefined)
	).union(
		new Set(
			[...afterIds]
				.map(id => props.schedule.eventSlots.get(id))
				.filter(slot => slot !== undefined)
				.filter(slot => slot.deleted)
		)
	)]
		.map(slot => ["deleted", slot] as ["deleted", ClientScheduleEventSlot])
	;
	const modified = [...toRaw(afterIds).intersection(beforeIds)]
		.map(id => props.schedule.eventSlots.get(id))
		.filter(slot => slot !== undefined)
		.filter(slot => slot.isModified() && !slot.deleted)
		.map(slot => ["modified", slot] as ["modified", ClientScheduleEventSlot])
	;
	return [
		...added,
		...removed,
		...modified,
	];
});
</script>
