import type React from "react";
import type { IEventInfo, MatchInfo } from "../types";
import { useRequest } from "ahooks";
import { Spin, Tabs } from "antd";
import { PlayerList } from "./PlayerList";
import { GroupingPrediction } from "./GroupingPrediction";
import { useMemo } from "react";

interface Props {
  game?: IEventInfo;
}

export const GamePanel: React.FC<Props> = props => {
  const fetchPlayers = useRequest<MatchInfo | null, []>(async () => {
    if (!props.game) return null;
    const info: MatchInfo = await (await fetch(`/api/match/${props.game.matchId}`)).json();
    return info;
  }, { refreshDeps: [props] });
  const sneckMode = useMemo(() => {
    return !!props.game?.title?.includes('争霸赛');
  }, [props.game]);
  return (
    <Spin spinning={fetchPlayers.loading}>
      <Tabs
        items={fetchPlayers.loading ? [] : [
          {
            key: 'groups',
            label: '分组预测',
            children: <GroupingPrediction sneckMode={sneckMode} players={fetchPlayers.data?.players} />
          },
          {
            key: 'players',
            label: '成员列表',
            children: <PlayerList players={fetchPlayers.data?.players} />
          },
        ]}
      />
    </Spin>
  );
}