---
import "~/material/content.css";
import type { GetStaticPaths } from "astro";
import { render } from "astro:content";
import { getCollection } from "astro:content";
import { format } from "date-fns";
import TimeDistanceToNow from "~/components/TimeDistanceToNow/index.astro";
import Regular from "~/layouts/Regular.astro";
import { getPostParam } from "~/utils/posts";

export const getStaticPaths = (async () => {
  const posts = await getCollection("posts");

  return posts.map((x) => ({
    params: getPostParam(x),
    props: {
      post: x,
    },
  }));
}) satisfies GetStaticPaths;

const { post } = Astro.props;

const { Content } = await render(post);
---

<Regular title={post.data.title}>
  <div id="_layout">
    <div></div>
    <main class="content">
      <h1 transition:name={`post:${post.id}:title`}>{post.data.title}</h1>
      <div class="page-metadata">
        <span>
          <TimeDistanceToNow datetime={post.data.date.toISOString()}
            >{format(post.data.date, "yyyy/MM/dd")}</TimeDistanceToNow
          >
          创建
        </span>
        {
          post.data.updated && (
            <span>
              <TimeDistanceToNow datetime={post.data.updated.toISOString()}>
                {format(post.data.updated, "yyyy/MM/dd")}
              </TimeDistanceToNow>
              更新
            </span>
          )
        }
        {post.data.visibility === "draft" && <span>This is a draft</span>}
      </div>
      <Content />
    </main>
    <div></div>
  </div>
</Regular>

<style>
  :global(:root) {
    background-color: var(--palette-grey-200);
  }

  #_layout {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    margin: auto;

    & > :global(*) {
      overflow: hidden;
      word-wrap: normal;
    }
  }

  .page-metadata {
    display: grid;
    justify-content: flex-end;
    margin-inline: 16px;
    gap: 4px;
    color: var(--palette-grey-700);

    > * {
      display: flex;
      gap: 2px;
      justify-content: flex-end;
    }
  }

  main {
    max-width: 70rem;
    margin-top: 32px;
    margin-bottom: calc(env(safe-area-insets-bottom, 16px) + 16px);
    background-color: var(--palette-grey-50);
    padding-block: 16px;
    border-radius: 2px;
  }
</style>

<script>
  import { wrapElementsInClass } from "~/utils/dom";
  import { renderAdvancedTablesOn } from "~/utils/table";

  document.addEventListener("astro:page-load", () => {
    wrapElementsInClass(document.querySelectorAll(".content > table"), [
      "table-responsive",
    ]);
    renderAdvancedTablesOn(
      document.querySelectorAll(".content > .table-responsive > table")
    );
  });
</script>