<script setup lang="ts">
import type {
	SanitisedActor,
	SanitisedTicketAttachment,
	SanitisedTicketMessage,
} from "@stealth-developers/api";

import { computed } from "vue";

import MessageGroup from "./MessageGroup.vue";

const props = defineProps<{
	messages: SanitisedTicketMessage[];
	attachments: SanitisedTicketAttachment[];
	actorMap: Record<string, SanitisedActor>;
}>();

const groupedMessages = computed(() => {
	const groups: SanitisedTicketMessage[][] = [];
	let currentGroup: SanitisedTicketMessage[] = [];

	for (const msg of props.messages) {
		if (currentGroup.length === 0) {
			currentGroup.push(msg);
		} else {
			const lastMsg = currentGroup[currentGroup.length - 1]!;
			if (
				lastMsg.actorId === msg.actorId &&
				lastMsg.actorRole === msg.actorRole &&
				lastMsg.isPrivate === msg.isPrivate
			) {
				currentGroup.push(msg);
			} else {
				groups.push(currentGroup);
				currentGroup = [msg];
			}
		}
	}

	if (currentGroup.length > 0) {
		groups.push(currentGroup);
	}
	return groups;
});

const attachmentsByMessageId = computed(() => {
	const map: Record<string, SanitisedTicketAttachment[]> = {};
	for (const att of props.attachments) {
		const msgId = att.messageId || att.ticketMessageId;
		if (msgId) {
			if (!map[msgId]) {
				map[msgId] = [];
			}
			map[msgId].push(att);
		}
	}
	return map;
});
</script>

<template>
	<div class="ticket-messages">
		<h2>Messages</h2>
		<div class="messages-container" v-if="groupedMessages.length > 0">
			<MessageGroup
				v-for="(group, index) in groupedMessages"
				:key="index"
				:group="group"
				:actorMap="props.actorMap"
				:attachmentsByMessageId="attachmentsByMessageId"
			/>
		</div>
		<div v-else class="no-messages">No messages in this ticket.</div>
	</div>
</template>

<style scoped>
.ticket-messages {
	display: flex;
	flex-direction: column;
	background-color: hsl(var(--crust));
	border-radius: 1.5rem;
	overflow: hidden;

	h2 {
		padding: 0.5rem 1rem;
		font-size: 1.5rem;
		font-weight: 800;
		color: hsl(var(--text));
	}

	.messages-container {
		display: flex;
		flex-direction: column;
	}

	.no-messages {
		color: hsl(var(--subtext0));
		font-style: italic;
		font-size: 0.95rem;
		padding: 1rem 0;
	}
}
</style>