import * as fs from "fs";
import React from "react";
import matter from 'gray-matter'
import {Metadata} from "next"
import Image from "next/image";

import {Banner} from "@/components/Banner/Banner";

import styles from './page.module.sass'
import bannerImage from './pingcap-payment-info.svg'
import Item from './Item'

const pathname = './src/app/payment-info/[slug]/markdown'

const title = '付费资料'
// const description = ''

export const metadata: Metadata = {
  title,
  // description,
}

// export async function generateStaticParams() {
//   console.log({pathname})
//   const filenames = fs.readdirSync(pathname)
//   console.log({filenames})
//   return filenames
// }

// export async function generateMetadata({params}: { params: { slug: string } }): Promise<Metadata> {
//   const source = fs.readFileSync(pathname + '/' + decodeURIComponent(params.slug) + '.md').toString()
//   const {data, content} = matter(source)
//   return {
//     ...data,
//     description: data.summary,
//   }
// }

export default function PaymentInfoListPage() {
  const filenames = fs.readdirSync(pathname).filter((name) => name.endsWith('.md'))
  // console.log({filenames})
  const items: {title: string, date: Date, summary: string, slug: string}[] = []
  for (const filename of filenames) {
    const filepath = pathname + '/' + filename
    // console.log({filepath})
    try {
      const source = fs.readFileSync(filepath).toString()
      const {data, content} = matter(source)
      // console.log({data})
      const meta = data as {title: string, date: Date, summary: string}
      if (!(meta.title == null)) {
        items.push({...meta, slug: filename.replaceAll('.md', '')})
      }
    } catch (e) {
      console.error(e, {filename})
    }
  }
  // console.log({items})
  return (
    <div className={styles.container}>
      <section className={styles.banner}>
        <Banner
          title={title}
          // description={description}
          image={<Image className={styles.banner_image} src={bannerImage} alt={''} height={200} />}
        />
      </section>
      <main>
        <section className={styles.list}>
          {items.sort((a, b) => a.date < b.date ? 1 : -1).map((value) => (
            <Item key={value.slug} value={value} />
          ))}
        </section>
      </main>
    </div>
  )
}