import { useTournament } 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,
  TreeStructureIcon,
  UsersThreeIcon,
  UsersIcon,
  ShuffleIcon,
} from "@phosphor-icons/react";
import { useSheet } from "@/hooks/use-sheet";
import EditEnrolledTeams from "./edit-enrolled-teams";
import EditEnrolledPlayers from "./edit-enrolled-players";
import ListLink from "@/components/list-link";
import React from "react";
import EditRules from "./edit-rules";
import { useLingui } from "@lingui/react/macro";

interface ManageTournamentProps {
  tournamentId: string;
}

const ManageTournament = ({ tournamentId }: ManageTournamentProps) => {
  const { t } = useLingui();
  const { data: tournament } = useTournament(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();

  const [v, setV] = React.useState("");

  return (
    <>
      <List p="0">
        <ListButton
          label={t`Edit Tournament`}
          Icon={HardDrivesIcon}
          onClick={openEditTournament}
        />
        <ListButton
          label={t`Edit Rules`}
          Icon={PencilLineIcon}
          onClick={openEditRules}
        />
        <ListButton
          label={t`Edit Enrollments`}
          Icon={UsersThreeIcon}
          onClick={openEditTeams}
        />
        {tournament.regional && (
          <ListLink
            label={t`Assign Partners`}
            Icon={ShuffleIcon}
            to={`/admin/tournaments/${tournamentId}/assign-partners`}
          />
        )}
        {!tournament.regional && (
          <ListLink
            label={t`Manage Team Songs/Logos`}
            Icon={UsersIcon}
            to={`/admin/tournaments/${tournamentId}/teams`}
          />
        )}
        <ListLink
          label={t`Run Tournament`}
          Icon={TreeStructureIcon}
          to={`/admin/tournaments/run/${tournamentId}`}
        />
      </List>

      <Sheet
        title={t`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,
            regional: tournament.regional,
          }}
          close={closeEditTournament}
        />
      </Sheet>

      <Sheet
        title={t`Edit Rules`}
        opened={editRulesOpened}
        onChange={closeEditRules}
      >
        <EditRules tournamentId={tournamentId} onClose={closeEditRules} />
      </Sheet>

      <Sheet
        title={tournament.regional === true ? t`Manage Enrollments` : t`Edit Enrolled Teams`}
        opened={editTeamsOpened}
        onChange={closeEditTeams}
      >
        {tournament.regional === true ? (
          <EditEnrolledPlayers tournamentId={tournamentId} />
        ) : (
          <EditEnrolledTeams tournamentId={tournamentId} />
        )}
      </Sheet>
    </>
  );
};

export default ManageTournament;
