import Button from "@/components/button";
import Sheet from "@/components/sheet/sheet";
import { useAuth } from "@/contexts/auth-context";
import { useSheet } from "@/hooks/use-sheet";
import { useMemo, useState, useCallback, useEffect } from "react";
import TeamSelectionView from "./enroll-team/team-selection-view";
import TeamForm from "@/features/teams/components/team-form";
import { teamQueries, useTeam } from "@/features/teams/queries";
import { Team } from "@/features/teams/types";
import { useQuery } from "@tanstack/react-query";
import { Loader } from "@mantine/core";
import useEnrollTeam from "@/features/tournaments/hooks/use-enroll-team";

interface UpdateTeamProps {
  tournamentId: string;
  teamId: string
}

const UpdateTeam = ({ tournamentId, teamId }: UpdateTeamProps) => {
  const { open, isOpen, toggle } = useSheet();
  const { data: team } = useTeam(teamId);

  const initialValues = useMemo(() => {
    if (!team) return undefined;

    return {
      name: team.name,
      song_id: team.song_id,
      song_name: team.song_name,
      song_artist: team.song_artist,
      song_album: team.song_album,
      song_start: team.song_start,
      song_end: team.song_end,
      song_image_url: team.song_image_url,
      players: team.players?.map(player => player.id),
    };
  }, [team]);

  return (
    <>
      <Button size="sm" onClick={open}>
        Update Team
      </Button>

      <Sheet title={"Update Team"} opened={isOpen} onChange={toggle}>
        <TeamForm
          close={toggle}
          tournamentId={tournamentId}
          initialValues={initialValues}
          teamId={teamId}
          onSubmit={(_) => close()}
        />
      </Sheet>
    </>
  );
};

export default UpdateTeam;