<script lang="ts">
	let { obj }: { obj: any } = $props();
</script>

{#snippet printObject(object: any, depth: number = 0, path: string = '')}
	{#if object === null}
		<span class="text-neutral-content italic">null</span>
	{:else if object === undefined}
		<span class="text-neutral-content italic">undefined</span>
	{:else if Array.isArray(object)}
		{#if object.length === 0}
			<span class="text-base-content/60">[]</span>
		{:else}
			<div class="collapse collapse-arrow bg-base-200/50 rounded-box mb-1">
				<input type="checkbox" checked={depth < 2} />
				<div class="collapse-title text-sm font-medium text-primary">
					<span class="badge badge-primary badge-sm mr-2">{object.length}</span>
					Array
				</div>
				<div class="collapse-content">
					<div class="space-y-1 pl-4 border-l-2 border-base-300">
						{#each object as item, index}
							<div class="flex items-start gap-2">
								<span class="badge badge-ghost badge-xs font-mono">{index}</span>
								<div class="flex-1 min-w-0">
									{@render printObject(item, depth + 1, `${path}[${index}]`)}
								</div>
							</div>
						{/each}
					</div>
				</div>
			</div>
		{/if}
	{:else if typeof object === 'object'}
		{#if Object.keys(object).length === 0}
			<span class="text-base-content/60">{'{}'}</span>
		{:else if depth === 0}
			{@render printObjectInside(object, depth, path)}
		{:else}
			<div class="collapse collapse-arrow bg-base-200/50 rounded-box mb-1">
				<input type="checkbox" checked={depth < 4} />
				<div class="collapse-title text-sm font-medium text-secondary">
					<span class="badge badge-secondary badge-sm mr-2">
						{Object.keys(object).length}
					</span>
					Object
				</div>
				<div class="collapse-content">
					{@render printObjectInside(object, depth, path)}
				</div>
			</div>
		{/if}
	{:else if typeof object === 'string'}
		<span class="text-success font-medium">"{object}"</span>
	{:else if typeof object === 'number'}
		<span class="text-info font-medium">{object}</span>
	{:else if typeof object === 'boolean'}
		<span class="text-warning font-medium">{object}</span>
	{:else if typeof object === 'function'}
		<span class="text-neutral-content italic">function</span>
	{:else}
		<span class="text-base-content">{String(object)}</span>
	{/if}
{/snippet}

{#snippet printObjectInside(object: any, depth: number = 0, path: string = '')}
	<div class="space-y-1 pl-4 border-l-2 border-base-300">
		{#each Object.entries(object) as [key, value]}
			<div class="flex items-start gap-2">
				<span class="text-accent font-semibold text-sm min-w-0 break-words">
					"{key}":
				</span>
				<div class="flex-1 min-w-0">
					{@render printObject(value, depth + 1, `${path}.${key}`)}
				</div>
			</div>
		{/each}
	</div>
{/snippet}

<div class="mockup-code bg-base-100 shadow-lg">
	<div class="px-4 py-2">
		{@render printObject(obj)}
	</div>
</div>
