import type React from "react";
import type { BasePlayer, Player } from "../types";
import { Tabs } from "antd";
import { PlayerList } from "./PlayerList";
import { GroupingPrediction } from "./GroupingPrediction";
import { useMemo } from "react";
import dayjs from "dayjs";

interface Props {
  title: string;
  players?: Player[];
  members?: BasePlayer[];
}

export const GamePanel: React.FC<Props> = props => {
  const sneckMode = useMemo(() => {
    return !!props.title?.includes('争霸赛');
  }, [props.title]);
  const isPassedGame = useMemo(() => {
    const match = /(?<year>\d{4})年(?<month>\d{1,2})月(?<day>\d{1,2})/.exec(props.title);
    const { year, month, day } = match?.groups ?? {};
    const date = dayjs(`${year}-${month}-${day}`);
    console.debug('date %s', date.format('YYYY-MM-DD'));
    if (!date.isValid()) return true;
    return date.isBefore(dayjs());
  }, []);
  return (
    <>
      <Tabs
        items={[
          {
            key: 'groups',
            label: '分组预测',
            children: (
              <GroupingPrediction
                sneckMode={sneckMode}
                isPassedGame={isPassedGame}
                players={props.members}
              />
            ),
          },
          {
            key: 'players',
            label: '成员列表',
            children: <PlayerList players={props.players} />
          },
        ]}
      />
    </>
  );
}