import { useEffect, useState } from "react";
import { wwwAXIOS } from "src/Www";
import { useTranslation } from "react-i18next";
import { sprintf } from "sprintf-js";
import { getMillis } from "taehui-ts/date";
import { HitViewLoading } from "src/Loading";

const HitView = () => {
  const [isLoading, setLoading] = useState(true);
  const [valueBefore, setValueBefore] = useState(0);
  const [value, setValue] = useState(0);

  const { t } = useTranslation();

  useEffect(() => {
    (async () => {
      await wwwAXIOS.post("/hit", null, {
        headers: {
          millis: getMillis(),
        },
      });
      const { status, data } = await wwwAXIOS.get<number[]>("/hit");

      if (status === 200) {
        setValueBefore(data[0]);
        setValue(data[1]);
        setLoading(false);
      }
    })();
  }, []);

  return (
    <>
      <h5>{t("hit00")}</h5>
      {isLoading ? (
        <HitViewLoading />
      ) : (
        <span>
          {sprintf(t("hit01"), valueBefore)}
          <br />
          {sprintf(t("hit02"), value)}
          <br />
          {t("hit03")}
        </span>
      )}
    </>
  );
};

export default HitView;
