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,
} from "@phosphor-icons/react";
import { useSheet } from "@/hooks/use-sheet";
import EditEnrolledTeams from "./edit-enrolled-teams";
import ListLink from "@/components/list-link";
import { RichTextEditor } from "@/components/rich-text-editor";
import React from "react";

interface ManageTournamentProps {
  tournamentId: string;
}

const ManageTournament = ({ tournamentId }: ManageTournamentProps) => {
  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>
        <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}
        />
        <ListLink
          label="Run Tournament"
          Icon={TreeStructureIcon}
          to={`/admin/tournaments/run/${tournamentId}`}
        />
      </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}
      >
        <RichTextEditor value={v} onChange={setV} />

        {v}
      </Sheet>

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

export default ManageTournament;