import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { sprintf } from "sprintf-js";

import { HitViewLoading } from "src/Loading";
import useGetHit from "src/taehui/useGetHit";
import usePostHit from "src/taehui/usePostHit";

const HitView = () => {
  const { t } = useTranslation();
  const [isHitPosted, setHitPosted] = useState(false);

  const {
    data: [hitBefore, hit],
    isFetched: isHitLoaded,
  } = useGetHit(isHitPosted);

  const { mutate: postHit } = usePostHit();

  useEffect(() => {
    postHit();
    setHitPosted(true);
  }, [postHit]);

  return (
    <>
      <h5>{t("hit00")}</h5>
      {isHitLoaded ? (
        <span>
          {sprintf(t("hit01"), hitBefore)}
          <br />
          {sprintf(t("hit02"), hit)}
          <br />
          {t("hit03")}
        </span>
      ) : (
        <HitViewLoading />
      )}
    </>
  );
};

export default HitView;
