import { useEffect, useMemo, useRef } from "react";
import { Box } from "@mantine/core";
import Header from "./header";
import TeamList from "@/features/teams/components/team-list";
import SwipeableTabs from "@/components/swipeable-tabs";
import { useTournament } from "../../queries";
import MatchList from "@/features/matches/components/match-list";
import { TournamentStats } from "../tournament-stats";
import { useLingui } from "@lingui/react/macro";
import { track } from "@/lib/telemetry/client";

interface ProfileProps {
  id: string;
}

const Profile = ({ id }: ProfileProps) => {
  const { t } = useLingui();
  const { data: tournament } = useTournament(id);
  const trackedId = useRef<string | null>(null);

  useEffect(() => {
    if (!tournament || trackedId.current === tournament.id) return;
    trackedId.current = tournament.id;
    track("tournament_viewed", { tournament: tournament.name });
  }, [tournament]);

  if (!tournament) return null;

  const tabs = useMemo(() => [
    {
      label: t`Overview`,
      value: "overview",
      content: <TournamentStats tournament={tournament} />
    },
    {
      label: t`Matches`,
      value: "matches",
      content: <MatchList matches={tournament.matches?.sort((a, b) => b.order - a.order) || []} />
    },
    {
      label: t`Teams`,
      value: "teams",
      content: <>
        <TeamList teams={tournament.teams || []} isRegional={tournament.regional} />
      </>
    }
  ], [tournament, t]);

  return <>
    <Header tournament={tournament} />
    <Box mt='lg'>
      <SwipeableTabs tabs={tabs} />
    </Box>
  </>;
};

export default Profile;