"use client";

import NotesView from "@/app/[language]/note/components/NotesView";
import PositionInput from "@/app/[language]/note/components/PositionInput";
import WantInput from "@/app/[language]/note/components/WantInput";
import useGetNote from "@/app/[language]/note/query/useGetNote";

import { useNoteStore } from "@/state/Stores";
import { formatText } from "@/utilities/Utility";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import { useEffect, useMemo } from "react";
import Stack from "react-bootstrap/Stack";
import { useIntParam } from "taehui-ts/fe-utilities";

export default observer(() => {
  const {
    setLastSrc,
    setWantAvatar,
    setLastPage,
    lastWant,
    lastSrc,
    setWantInput,
    setLastWant,
  } = useNoteStore();
  const t = useTranslations();

  let { want: [want] = [""] } = useParams<{ want: string[] }>();
  want = useMemo(() => decodeURIComponent(want), [want]);
  const { param: src } = useIntParam("src", 0);
  const { param: page, setParam: setPage } = useIntParam("page", 1);

  const {
    data: { topCount, totalCount, lastPage },
    isFetched: isNoteLoaded,
  } = useGetNote();

  useEffect(() => {
    if ((want !== lastWant || src !== lastSrc) && page > 1) {
      setPage(1);
    }
  }, [lastSrc, lastWant, page, setPage, src, want]);

  useEffect(() => {
    if (isNoteLoaded) {
      setLastPage(lastPage);
    }
  }, [isNoteLoaded, lastPage, setLastPage]);

  useEffect(() => {
    setWantInput(want);
  }, [setWantInput, want]);

  useEffect(() => {
    setLastWant(want);
  }, [setLastWant, want]);

  useEffect(() => {
    setLastSrc(src);
  }, [setLastSrc, src]);

  useEffect(() => {
    setWantAvatar(src === 1 ? want : "");
  }, [setWantAvatar, src, want]);

  return (
    <Stack gap={2}>
      <WantInput />
      <hr />
      <NotesView />
      <PositionInput />
      <hr />
      {isNoteLoaded && (
        <>
          {t("topCountText", {
            topCount: formatText(topCount),
          })}
          <br />
          {t("totalCountText", { totalCount: formatText(totalCount) })}
        </>
      )}
      <span
        dangerouslySetInnerHTML={{
          __html: t.raw("bannedNoteFile"),
        }}
      />
    </Stack>
  );
});