import { useQuery } from "@tanstack/react-query";
import { useLocation } from "react-router-dom";
import { sprintf } from "sprintf-js";
import { useTranslation } from "react-i18next";

import { wwwAXIOS } from "src/Www";
import { GetHOFAPI } from "src/wwwAPI";
import { useHOFStore } from "src/Stores";
import { formatText } from "src/Utility";

export default function useGetAtBandHOF() {
  const { tabPosition, atTabPosition } = useHOFStore();

  const { t } = useTranslation();

  const { pathname } = useLocation();

  return useQuery<
    {
      avatarID: string;
      avatarName: string;
      text: string;
    }[]
  >({
    enabled:
      tabPosition === 1 &&
      atTabPosition === 3 &&
      pathname.startsWith("/qwilight/hof"),
    queryKey: ["atBandHOF"],
    queryFn: async () => {
      const { data } = await wwwAXIOS.get<GetHOFAPI[]>("/hof/atBand");
      return data.map((hof) => ({
        ...hof,
        text: sprintf(t("textBand"), formatText(hof.value)),
      }));
    },
    initialData: [],
  });
}