import * as fs from "fs";
import matter from 'gray-matter'
import {Metadata} from "next";
import dayjs from "dayjs";
import {tags} from "@/app/practice/data";

import styles from './page.module.sass'
import {Col, Collapse, Row, Space} from "antd";
import Link from "next/link";
import clsx from "clsx";
import {ShareToWechat} from "@/components/ShareToWechat/ShareToWechat";
import Image from "next/image";
import iconDateSvg from "@/assets/icon-date.svg";
import {Markdown} from "@/components/Markdown";

const pathname = './src/app/practice/[slug]/markdown'

export function generateStaticParams() {
  console.log({pathname})
  const filenames = fs.readdirSync(pathname).filter((name) => name.endsWith('.md'))
  console.log({filenames})
  return filenames.map((filename) => ({slug: filename.replaceAll('.md', '')}))
}

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 PracticeDetailPage({params}: { params: { slug: string } }) {
  const source = fs.readFileSync(pathname + '/' + decodeURIComponent(params.slug) + '.md').toString()
  const {data, content} = matter(source)

  return (
    <div className={styles.container}>
      <Row gutter={[32, 32]}>
        <Col xs={24} sm={7} className={styles.sidebar}>
          <h2>用户实践</h2>
          <Collapse defaultActiveKey={tags.map((value) => value.category)} ghost items={tags.map((value) => ({
            key: value.category,
            label: value.category,
            children: value.children.map((value) => (
              <Link key={value.url} href={value.url} className={clsx(styles.sidebar_item, {[styles.sidebar_item_active]: params.slug === value.url})}>{value.name}</Link>
            )),
          }))} />
          {/*{tags.map((value) => (*/}
          {/*  <div key={value.category}></div>*/}
          {/*))}*/}
        </Col>
        <Col xs={24} sm={17} className={styles.main}>
          <h1>{data.title}</h1>
          <Space size={16} className={styles.meta}>
            <div>
              <Image src={iconDateSvg} alt={'日期'} height={16} /> {dayjs(data.date).format('YYYY-MM-DD')}
            </div>
            {/*<div>*/}
            {/*  <Image src={iconWriterSvg} alt={'作者'} height={16} /> {(data.author ?? []).join('、')}*/}
            {/*</div>*/}
          </Space>
          <div className={'markdown-body'}>
            <Markdown>{content}</Markdown>
          </div>
          <div className={styles.ShareToWechat}>
            <ShareToWechat />
          </div>
        </Col>
      </Row>
    </div>
  )
}