import { Grid, Container, Typography, Paper } from "@mui/material";
import Link from "next/link";
import { remark } from "remark";
import mdx from "remark-mdx";
import fs from "fs";

export default function Home({ posts }) {
  return (
    <Container>
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <Paper
            style={{
              padding: "1rem",
              margin: "1rem",
              backgroundColor: "#fafafa",
            }}
          >
            <Typography variant="h3">窝</Typography>
            <hr />
            <Typography variant="body1">用对的工具，做对的事。</Typography>
          </Paper>
        </Grid>
        {posts.map((post) => (
          <Grid item sm={6} md={4} key={post.id}>
            <Link href={`/posts/${post.id}`} passHref>
              <Paper
                style={{
                  padding: "1rem",
                  margin: "1rem",
                  backgroundColor: "#fafafa",
                }}
              >
                <Typography variant="h5">{post.meta.title}</Typography>
                <Typography variant="body1">{post.meta.description}</Typography>
              </Paper>
            </Link>
          </Grid>
        ))}
      </Grid>
    </Container>
  );
}

export async function getStaticProps(context) {
  const posts = fs.readdirSync("./pages/posts").map((file) => {
    const content = fs.readFileSync(`./pages/posts/${file}`, "utf8");
    const remarkAST = remark().use(mdx).parse(content);
    var { value, body } = remarkAST.children[0];
    value = value.replaceAll("\n", "");
    const toParse = value.slice(value.indexOf("{"), value.lastIndexOf("}") + 1);
    const meta = JSON.parse(toParse);
    return {
      id: file.replace(".mdx", ""),
      meta,
    };
  });
  return {
    props: {
      posts,
    },
  };
}