import { getAccountInfo, idToRegion } from '@blitzkit/core';
import { Text } from '@radix-ui/themes';
import { useMemo } from 'react';
import usePromise from 'react-promise-suspense';
import { App } from '../stores/app';

export function WargamingAccountName() {
  const wargaming = App.use((state) => state.logins.wargaming);
  const promise = useMemo(async () => {
    if (!wargaming) return null;

    const data = await getAccountInfo(
      idToRegion(wargaming.id),
      wargaming.id,
      [],
      { access_token: wargaming.token },
    );

    return data?.nickname as string | undefined;
  }, [wargaming]);
  const nickname = usePromise(() => promise, []);

  return nickname ?? <Text color="gray">Unknown Account</Text>;
}