---
import cx from 'clsx'
import { getPages } from '~/lib/page'
import { getSEOPropsForHome } from '~/lib/seo/seo'
import {
  getPagesByCategory,
  getFeaturedPages,
  getRecentPages
} from '~/lib/page/queries'
import TopNav from '~/components/TopNav.astro'
import BaseLayout from '~/components/BaseLayout.astro'
import PageListItem from '~/components/V2017Home/PageListItem.astro'
import FeaturedPages from '~/components/V2017Home/FeaturedPages.astro'
import Announcements from '~/components/V2017Home/Announcements.astro'
import SearchForm from '~/components/V2017Sheet/SearchForm.astro'
import CarbonBox from '~/components/V2017/CarbonBox.astro'
import SEO from '~/components/SEO/SEO.astro'
import { typeStyles } from '~/styles/CommonStyles'
import { urls } from '~/config'

const pages = await getPages()
const pageCategories = getPagesByCategory(pages)
const featuredPages = getFeaturedPages(pages, { maxCount: 8 })
const recentPages = getRecentPages(pages, { maxCount: 18 })

const seoProps = getSEOPropsForHome()
const t = {
  title: "Rico's cheatsheets",
  tagline: `Hey! I'm <a href='https://ricostacruz.com'>@rstacruz</a> and this is a modest collection of cheatsheets I've written.`,
  recentlyUpdated: 'Recently updated',
  seeSomethingMissing: 'See something missing?',
  requestCheatsheet: 'Request cheatsheet'
}

const styles = {
  body: 'V2017Sheet__body max-w-slim p-6 md:px-8 mx-auto'
}

const headingStyles = {
  root: cx('SiteHeading__root', 'my-12 text-center'),
  h1: cx('SiteHeading__h1', typeStyles.manrope, 'text-5xl text-zinc-950'),
  tagline: cx('SiteHeading__tagline', 'text-xl', 'mt-4')
}
---

<BaseLayout>
  <Fragment slot="head">
    <SEO {...seoProps} />
  </Fragment>
  <TopNav noEdit noBack />
  <div class={styles.body}>
    <div class={headingStyles.root}>
      <h1 class={headingStyles.h1}>{t.title}</h1>
      <p class={headingStyles.tagline} set:html={t.tagline} />
    </div>
    <div role="banner">
      <SearchForm isLive />

      <div class="mt-8"></div>

      {/* Publicite */}
      <div class="pubbox"><CarbonBox /></div>

      <div class="mt-8"></div>
    </div>

    <div class="pages-list" role="main">
      {/* Featured pages */}
      <FeaturedPages pages={featuredPages} />

      {/* Recent pages */}
      <h2 class="category item" data-js-searchable-header>
        <span>{t.recentlyUpdated}</span>
      </h2>
      {recentPages.map((page) => <PageListItem page={page} />)}

      {
        Object.values(pageCategories).map((category) => {
          if (category.pages.length === 0) return

          return (
            <>
              <h2 class="category item" data-js-searchable-header>
                <span>{category.title}</span>
              </h2>

              {category.pages.map((page) => (
                <PageListItem page={page} />
              ))}
            </>
          )
        })
      }

      <div class="message item missing-message">
        <h3>{t.seeSomethingMissing}</h3>
        <p>
          <a class="push-button" href={urls.newCheatsheetUrl}
            >{t.requestCheatsheet}</a
          >
        </p>
      </div>
    </div>
  </div>
  <Announcements />
</BaseLayout>

<style lang="scss" is:global>
  @import '../sass/2017/utils';
  @import '../sass/2017/components/missing-message';
  @import '../sass/2017/components/pages-list';
  @import '../sass/2017/components/push-button';
  @import '../sass/2017/components/notice-box';
</style>
