<script lang="ts">
	import type { Comment } from '@onecomme.com/onesdk/types/Comment';
	import {
		BatteryFullIcon,
		HomeIcon,
		SendHorizontalIcon,
		Tally4Icon,
		TriangleIcon,
		WifiIcon
	} from '@lucide/svelte';
	import RenderComment from '@/components/RenderComment.svelte';
	import axolotl from '@/assets/axolotl.png';

	let { chats }: { chats: Comment[] } = $props();

	let date = $state(new Date());

	let hour = $derived(date.getHours());
	let minute = $derived(date.getMinutes());

	let render_chats = $derived([...chats].reverse());

	function pad(str: string | { toString(): string }, char: number): string {
		const s = str.toString();
		const diff = char - s.length;
		if (diff <= 0) return s;
		return s + '0'.repeat(diff);
	}

	$effect(() => {
		const interval = setInterval(() => {
			date = new Date();
		}, 1000);
		return () => clearInterval(interval);
	});
</script>

<div class="w-460 h-800 relative">
	<div
		class="absolute -z-10 -right-6 top-150 w-15 rounded-5 bg-frame border-3 border-frame-border h-120"
	></div>
	<div
		class="absolute -z-10 -right-6 top-290 w-15 rounded-5 bg-frame border-3 border-frame-border h-75"
	></div>
	<div
		class="absolute -z-10 bg-black w-200 h-5 rounded-full origin-right -right-10 bottom-215 rotate-82"
	></div>
	<div
		class="absolute -z-10 bg-black w-200 h-5 rounded-full origin-right -right-5 bottom-215 rotate-70"
	></div>
	<div
		class="bg-frame p-15 rounded-25 z-10 border-frame-border border-5 w-full h-full flex flex-col gap-5 font-naikai"
	>
		<div
			class="w-full h-full flex flex-col border-3 border-screen-border rounded-10 overflow-hidden bg-background relative"
		>
			<div
				class="bg-status/80 gap-4 shadow-md backdrop-blur-md flex flex-row py-2 px-18 text-16 font-bold text-status-text absolute top-0 -left-10 -right-10"
			>
				<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
				<WifiIcon class="h-full w-auto ml-auto" />
				<BatteryFullIcon class="h-full w-auto" />
				<span>100%</span>
			</div>
			<div class="grow flex flex-col-reverse px-15 h-0 overflow-hidden">
				{#each render_chats as chat (chat)}
					<RenderComment {chat} />
				{/each}
			</div>
			<div class="px-30 py-15">
				<div
					class="rounded-full text-20 text-input-text bg-input px-20 py-10 flex flex-row items-center justify-between gap-10"
				>
					<span>回覆...</span>
					<SendHorizontalIcon class="size-20 text-input-icon" />
				</div>
			</div>
			<div class="h-48 flex flex-row items-center justify-center text-navigation gap-80">
				<Tally4Icon class="size-24"/>
				<HomeIcon class="size-24"/>
				<TriangleIcon class="size-24 origin-center -rotate-90" />
			</div>
		</div>
	</div>
	<img src={axolotl} alt="axolotl" class="z-20 w-340 h-332 absolute -right-192 -bottom-76" />
</div>
