---
import Link from '@/components/Link.astro'
import { ScrollArea } from '@/components/ui/scroll-area'
import {
  getParentId,
  getParentPost,
  getPostById,
  getPostReadingTime,
  getSubpostsForParent,
  isSubpost,
} from '@/lib/data-utils'
import { Icon } from 'astro-icon/components'

const { parentId } = Astro.props
const currentPostId = Astro.params.id as string
const isCurrentSubpost = isSubpost(currentPostId)
const rootParentId = isCurrentSubpost ? getParentId(currentPostId) : parentId

const currentPost = !isCurrentSubpost ? await getPostById(currentPostId) : null
const subposts = await getSubpostsForParent(rootParentId)
const parentPost = isCurrentSubpost ? await getParentPost(currentPostId) : null

const activePost = parentPost || currentPost
const isActivePost = activePost?.id === currentPostId

const activePostReadingTime = activePost
  ? await getPostReadingTime(activePost.id)
  : null
const subpostsWithReadingTime = await Promise.all(
  subposts.map(async (subpost) => ({
    ...subpost,
    readingTime: await getPostReadingTime(subpost.id),
  })),
)
---

<div
  class="sticky top-20 col-start-3 row-span-1 mr-auto ml-8 hidden h-[calc(100vh-5rem)] max-w-fit xl:block"
>
  <ScrollArea
    client:load
    className="flex max-h-[calc(100vh-8rem)] flex-col overflow-y-auto"
    type="always"
  >
    <div class="px-4">
      <ul class="space-y-1">
        {
          activePost && (
            <li>
              {isActivePost ? (
                <div class="text-foreground bg-muted flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium">
                  <Icon
                    name="lucide:book-open-text"
                    class="size-4 flex-shrink-0"
                    aria-hidden="true"
                  />
                  <div class="flex flex-col">
                    <span class="line-clamp-2">{activePost.data.title}</span>
                    {activePostReadingTime && (
                      <span class="text-muted-foreground/80 text-xs">
                        {activePostReadingTime}
                      </span>
                    )}
                  </div>
                </div>
              ) : (
                <Link
                  href={`/blog/${activePost.id}#post-title`}
                  class="hover:text-foreground text-muted-foreground hover:bg-muted/50 flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors"
                >
                  <Icon
                    name="lucide:book-open"
                    class="size-4 flex-shrink-0"
                    aria-hidden="true"
                  />
                  <div class="flex flex-col">
                    <span class="line-clamp-2">{activePost.data.title}</span>
                    {activePostReadingTime && (
                      <span class="text-muted-foreground/80 text-xs">
                        {activePostReadingTime}
                      </span>
                    )}
                  </div>
                </Link>
              )}
            </li>
          )
        }

        {
          subpostsWithReadingTime.length > 0 && (
            <li class="ml-4 space-y-1">
              {subpostsWithReadingTime.map((subpost) =>
                currentPostId === subpost.id ? (
                  <div class="text-foreground bg-muted flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium">
                    <Icon
                      name="lucide:file-text"
                      class="size-4 flex-shrink-0"
                      aria-hidden="true"
                    />
                    <div class="flex flex-col">
                      <span class="line-clamp-2">{subpost.data.title}</span>
                      <span class="text-muted-foreground/80 text-xs">
                        {subpost.readingTime}
                      </span>
                    </div>
                  </div>
                ) : (
                  <Link
                    href={`/blog/${subpost.id}`}
                    class="hover:text-foreground text-muted-foreground hover:bg-muted/50 flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors"
                  >
                    <Icon
                      name="lucide:file"
                      class="size-4 flex-shrink-0"
                      aria-hidden="true"
                    />
                    <div class="flex flex-col">
                      <span class="line-clamp-2">{subpost.data.title}</span>
                      <span class="text-muted-foreground/80 text-xs">
                        {subpost.readingTime}
                      </span>
                    </div>
                  </Link>
                ),
              )}
            </li>
          )
        }
      </ul>
    </div>
  </ScrollArea>
</div>
