<script lang="ts">
	import { WrenchIcon } from '@lucide/svelte';
	import type { Comment } from '@onecomme.com/onesdk/types/Comment';

	let { chat }: { chat: Comment } = $props();

	let author_color = $derived.by(() => {
		if (chat.data.isOwner) return 'text-name-owner';

		if (chat.service === 'youtube') {
			if (chat.data.isModerator) return 'text-name-moderator';
			if (chat.data.isMember) return 'text-name-member';
		}
		return 'text-name';
	});

	let layout = $derived(
		chat.data.isOwner
			? ['flex-row-reverse', 'pl-30', 'origin-bottom-right']
			: ['flex-row', 'pr-30', 'origin-bottom-left']
	);

	let is_youtube_gift = $derived(chat.service === 'youtube' && chat.data.hasGift);
	let gift_type = $derived(
		chat.service === 'youtube' && chat.data.hasGift ? chat.data.giftType : undefined
	);

	let author_name = $derived(chat.data.displayName || chat.data.name);
</script>

{#if gift_type === 'giftreceived'}
	<div class="text-14 text-hint text-center py-5 origin-bottom scale-enter">
		{chat.data.comment}
	</div>
{:else}
	<div class={[layout, 'flex gap-10 scale-enter py-10']}>
		<img src={chat.data.originalProfileImage} class="size-40 rounded-full" alt={author_name} />
		<div
			class={[
				'flex flex-col gap-5 grow w-0',
				chat.data.isOwner ? 'items-end' : 'items-start'
			]}
		>
			<div
				class={[
					'text-ellipsis whitespace-nowrap px-5 gap-5 flex flex-row items-center font-bold text-12 max-w-full',
					author_color,
					chat.data.isOwner ? 'justify-end' : 'justify-start'
				]}
			>
				<span class="text-ellipsis whitespace-nowrap">{author_name}</span>
				{#if chat.service === 'youtube' && chat.data.isModerator}
					<WrenchIcon class="size-12 min-w-14 min-h-14" />
				{/if}
			</div>
			{#if is_youtube_gift && gift_type === 'supersticker'}
				<div class="supersticker">
					{@html chat.data.comment}
				</div>
			{:else}
				<div
					class={[
						'px-15 py-10 text-chat-text bubble rounded-15 text-16',
						chat.data.isOwner ? 'bg-chat-bubble-owner' : 'bg-chat-bubble'
					]}
				>
					{@html chat.data.comment}
				</div>
			{/if}
		</div>
	</div>
{/if}

<style>
	@keyframes scale {
		0% {
			transform: scale(0);
		}
		100% {
			transform: scale(1);
		}
	}

	.scale-enter {
		animation: scale 0.2s ease-out;
	}

	.bubble :global(img) {
		display: inline-block;
		width: calc(16 * var(--spacing));
		height: calc(16 * var(--spacing));
	}

	.supersticker :global(img) {
		width: calc(72 * var(--spacing));
		height: calc(72 * var(--spacing));
	}
</style>
