import { useSuspenseQuery } from "@tanstack/react-query";
import { tournamentQueries } from "../queries";
import { List } from "@mantine/core";
import ListButton from "@/components/list-button";
import Sheet from "@/components/sheet/sheet";
import TournamentForm from "./tournament-form";
import { HardDrivesIcon, PencilLineIcon, UsersThreeIcon } from "@phosphor-icons/react";
import { useSheet } from "@/hooks/use-sheet";
import EditEnrolledTeams from "./edit-enrolled-teams";

interface ManageTournamentProps {
  tournamentId: string;
}

const ManageTournament = ({ tournamentId }: ManageTournamentProps) => {
  const { data: tournament } = useSuspenseQuery(
    tournamentQueries.details(tournamentId)
  );

  if (!tournament) throw new Error("Tournament not found.");
  const { isOpen: editTournamentOpened, open: openEditTournament, close: closeEditTournament } = useSheet();
  const { isOpen: editRulesOpened, open: openEditRules, close: closeEditRules } = useSheet();
  const { isOpen: editTeamsOpened, open: openEditTeams, close: closeEditTeams } = useSheet();

  return (
    <>
      <List>
        <ListButton label="Edit Tournament" Icon={HardDrivesIcon} onClick={openEditTournament} />
        <ListButton label="Edit Rules" Icon={PencilLineIcon} onClick={openEditRules} />
        <ListButton label="Edit Enrolled Teams" Icon={UsersThreeIcon} onClick={openEditTeams} />
      </List>

      <Sheet title="Edit Tournament" opened={editTournamentOpened} onChange={closeEditTournament}>
        <TournamentForm 
          tournamentId={tournament.id} 
          initialValues={{
            name: tournament.name,
            location: tournament.location,
            desc: tournament.desc,
            start_time: tournament.start_time,
            enroll_time: tournament.enroll_time,
            end_time: tournament.end_time,
          }} 
          close={closeEditTournament} 
        />
      </Sheet>

      <Sheet title="Edit Rules" opened={editRulesOpened} onChange={closeEditRules}>
        <p>Test</p>
      </Sheet>

      <Sheet title="Edit Enrolled Teams" opened={editTeamsOpened} onChange={closeEditTeams}>
        <EditEnrolledTeams tournamentId={tournamentId} />
      </Sheet>
    </>
  )
};

export default ManageTournament;