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

import { wwwAXIOS } from "src/Www";
import { GetAvatarAbilitiesAPI } from "src/wwwAPI";
import { formatText } from "src/Utility";

export default function useGetAvatarAbility(
  inputMode: "5K" | "7K" | "9K",
  avatarID?: string,
) {
  const { t } = useTranslation();

  const { pathname } = useLocation();

  return useQuery({
    enabled: !!avatarID && pathname.startsWith("/qwilight/avatar"),
    queryKey: ["avatarAbility", inputMode, avatarID],
    queryFn: async () => {
      const { data } = await wwwAXIOS.get<GetAvatarAbilitiesAPI>(
        `/avatar/ability/${inputMode}`,
        {
          params: { avatarID },
        },
      );
      return data.map((data) => ({
        ...data,
        fittedText: sprintf(
          t("abilityFittedText"),
          formatText(data.stand),
          formatText(data.ability),
        ),
      }));
    },
    initialData: [],
  });
}