import { Button, Divider, Flex, Table } from "antd";
import type { GamesData } from "../types";
import User from "./User";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useRequest } from "ahooks";

interface Props {
  uid?: string;
  data?: GamesData[];
}

function toTeams(data: GamesData) {
  const {
    uid1, uid11, username1, username11,
    uid2, uid22, username2, username22,
    result1, result2, ascore1, score1, score2,
  } = data;
  const isDoubles = Boolean(username11);
  const team1 = [{ uid: uid1, name: username1 }];
  const team2 = [{ uid: uid2, name: username2 }];
  if (isDoubles) {
    team1.push({ uid: uid11, name: username11 });
    team2.push({ uid: uid22, name: username22 });
  }
  return { team1, team2 };
}

export function GameTable(props: Props) {
  const [displayData, setDisplayData] = useState(props.data ?? []);
  const [page, setPage] = useState(props.data?.length ? 1 :0);
  const fetchNextPage = useRequest<GamesData[], []>(async () => {
    const newPage = page + 1;
    if (page === 0) return [];
    const resp = await fetch(`/api/user/${props.uid}/games?page=${newPage}`);
    const nextPageData: GamesData[] = await resp.json();
    setDisplayData(data => [...data, ...nextPageData])
    setPage(newPage);
    return nextPageData;
  }, { manual: true, refreshDeps: [page] });
  const hasMore = useMemo(() => (props.data?.length === 10 && page < 2) || (fetchNextPage.data?.length || 0) === 10, [page, fetchNextPage]);

  return (
    <>
      <Divider>最近战绩</Divider>
      <Table
        loading={fetchNextPage.loading}
        rowKey={e => e.gameid}
        showHeader={false}
        pagination={false}
        dataSource={displayData}
        size="small"
        style={{ width: '100%', maxWidth: 400 }}
        footer={() => (
          <Flex justify="center">
            <Button
              disabled={!hasMore}
              loading={fetchNextPage.loading}
              onClick={fetchNextPage.runAsync}
            >加载更多</Button>
          </Flex>
        )}
      >
        <Table.Column align="center" dataIndex={''} render={(_, __, i) => i + 1} />
        <Table.Column
          dataIndex='gameid'
          align="center"
          render={((_, record: GamesData) => {
            const { uid1 } = record;
            const { team1, team2 } = toTeams(record);
            return (
              <Flex gap={48} justify="center">
                <PlayerTeam idNames={props.uid !== uid1 ? team1 : team2} />
              </Flex>
            );
          })}
        />
        <Table.Column
          align="center"
          dataIndex={'result1'}
          render={(result1, { result2, uid1 }: GamesData) => {
            const list = props.uid === uid1 ? [result1, result2] : [result2, result1];
            return list.join(':');
          }}
        />
        <Table.Column
          dataIndex={'score1'}
          render={(score1, { uid1, score2 }: GamesData) => {
            return props.uid === uid1 ? score1 : score2;
          }}
        />
        <Table.Column dataIndex={'dateline'} />
      </Table>
    </>
  );
}

function PlayerTeam(props: {
  idNames: { uid: string; name: string; }[]
}) {
  return (
    <Flex vertical align="center" justify="center">
      {props.idNames.map(e => (<div key={e.uid}><User {...e} /></div>))}
    </Flex>
  );
}