import { useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { getJSON } from "../../api";
import { langQuery, useI18n } from "../../i18n";
import { useLocalizedPath } from "../../useLocalizedPath";
import { MOCK_POSTS } from "../../mocks/mockPosts";
import { POST_STREAM_USES_MOCK } from "../../components/messageStream/hooks/usePostStream";
import type { Post } from "../../types/post";

export function PostRedirect() {
  const { id } = useParams();
  const { lang } = useI18n();
  const navigate = useNavigate();
  const lp = useLocalizedPath();

  useEffect(() => {
    if (!id) {
      navigate(lp("/browse"), { replace: true });
      return;
    }

    if (POST_STREAM_USES_MOCK) {
      const post = MOCK_POSTS.find((p) => p.id === id);
      navigate(
        lp(post ? `/browse?post=${encodeURIComponent(post.id)}` : "/browse"),
        {
          replace: true,
        },
      );
      return;
    }

    getJSON<Post>(
      `/api/posts/${id}?lang=${encodeURIComponent(langQuery(lang))}`,
    )
      .then((post) => {
        navigate(lp(`/browse?post=${encodeURIComponent(post.id)}`), {
          replace: true,
        });
      })
      .catch(() => navigate(lp("/browse"), { replace: true }));
  }, [id, lang, navigate, lp]);

  return <div className="text-neutral-400">…</div>;
}