---
import { UNCATEGORIZED } from '@constants/constants'
import I18nKey from '../i18n/i18nKey'
import { i18n } from '../i18n/translation'
import { getSortedPosts } from '../utils/content-utils'
import { getPostUrlBySlug } from '../utils/url-utils'
import { getCategoryUrl } from '../utils/url-utils'

interface Props {
  keyword?: string
  tags?: string[]
  categories?: string[]
}

let posts = await getSortedPosts()

interface Series {
  count: number
  name: string
  posts: typeof posts
}

const groups: { category: string; series: Series[] }[] = (() => {
  const groupedSeries = posts.reduce(
    (grouped: { [category: string]: {[seriesName: string]: Series} }, post) => {
      const category = post.data.category || UNCATEGORIZED
      const series = post.data.series || UNCATEGORIZED
      if (category == UNCATEGORIZED || series === UNCATEGORIZED) {
        return grouped
      }
      if (!grouped[category]) {
        grouped[category] = {}
      }
      if (!grouped[category][series]) {
        grouped[category][series] = {
          count: 0,
          name: series,
          posts: [],
        }
      }
      grouped[category][series].count++
      grouped[category][series].posts.push(post)
      return grouped
    },
    {},
  )

  // convert the object to an array
  const groupedSeriesArray = Object.keys(groupedSeries).map(key => ({
    category: key,
    series: Object.values(groupedSeries[key]),
  }))

  return groupedSeriesArray
})()
---

<div class="card-base px-8 py-6">
    {
        groups.map(group => (
            <div>
                <div class="flex flex-row w-full items-center h-[3.75rem]">
                    <div class="w-[20%] md:w-[15%] transition text-2xl font-bold text-right text-75 flex flex-row justify-end">
                      <a aria-label={group.category} href={getCategoryUrl(group.category)}
                          class="btn-plain scale-animation rounded-lg h-11 font-bold px-2 active:scale-95"
                      >
                          {group.category}
                      </a>
                    </div>
                    <div class="w-[15%] md:w-[10%]">
                        <div class="h-3 w-3 bg-none rounded-full outline outline-[var(--primary)] mx-auto -outline-offset-[2px] z-50 outline-3"></div>
                    </div>
                    <div class="w-[65%] md:w-[75%] transition text-left text-50">{group.series.length} 个{i18n(I18nKey.series)}</div>
                </div>
                {group.series.map(series => (
                    <a href={getPostUrlBySlug(series.posts[series.posts.length-1].slug)}
                       aria-label={series.name}
                       class="group btn-plain !block h-10 w-full rounded-lg hover:text-[initial]"
                    >
                        <div class="flex flex-row justify-start items-center h-full">
                            <!-- count -->
                            <div class="w-[20%] md:w-[15%] transition text-sm text-right text-50">
                                { series.count } 篇文章
                            </div>
                            <!-- dot and line -->
                            <div class="w-[15%] md:w-[10%] relative dash-line h-full flex items-center">
                                <div class="transition-all mx-auto w-1 h-1 rounded group-hover:h-5
                                bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)]
                                outline outline-4 z-50
                                outline-[var(--card-bg)]
                                group-hover:outline-[var(--btn-plain-bg-hover)]
                                group-active:outline-[var(--btn-plain-bg-active)]
                                "
                                ></div>
                            </div>
                            <!-- post title -->
                            <div class="w-[65%] md:max-w-[75%] md:w-[75%] text-left font-bold
                                group-hover:translate-x-1 transition-all group-hover:text-[var(--primary)]
                                text-75 pr-8 whitespace-nowrap overflow-ellipsis overflow-hidden"
                            >
                                    {series.name}
                            </div>
                        </div>
                    </a>
                ))}
            </div>
        ))
    }
</div>