import {
  RegisteredNotFoundRoute,
  useRouteInput,
} from "../../../../../presentation/routes/route-input.tsx";
import { ProjectPageHeader } from "../components/project-page-header.tsx";
import { usePublicContent } from "../use-public-content.tsx";

export function ProjectActivityPage() {
  const { params } = useRouteInput<"TECH_LOG_PROJECT_ACTIVITY">();
  const slug = typeof params.slug === "string" ? params.slug : "";
  const view = usePublicContent(["tech-log", "project", slug, "activity"], async (queries) => {
    const project = await queries.getProject(slug);
    return project
      ? { project, activity: await queries.getProjectActivity(slug) }
      : { project: undefined, activity: [] };
  });
  if (!view.ready) return view.fallback;

  const { project, activity } = view.data;
  if (!project) return <RegisteredNotFoundRoute />;

  /*
    활동은 로그다 — 언제 무엇을 올렸는지만 적는다.

    예전에는 각 줄에 그 기록으로 가는 링크가 있었다. 그러면 같은 글에 닿는 길이 둘이 되고,
    읽는 사람은 "기록"과 "활동"이 어떻게 다른지 매번 다시 판단해야 한다. 글을 읽는 자리는
    기록 화면 하나로 둔다.
  */
  return (
    <main id="main-content" className="shell project-page">
      <ProjectPageHeader project={project} title={`${project.title} 활동`} />
      {activity.length === 0 ? (
        <p className="public-empty-note">아직 이 프로젝트에서 공개한 기록이 없습니다.</p>
      ) : (
        <ol className="project-activity-list">
          {activity.map((item) => (
            <li key={item.id}>
              <article id={item.id}>
                <div>
                  <span>{item.type}</span>
                  <time dateTime={item.dateTime}>{item.date}</time>
                </div>
                <h2>{item.title}</h2>
              </article>
            </li>
          ))}
        </ol>
      )}
    </main>
  );
}