import ListButton from "@/components/list-button"
import Sheet from "@/components/sheet/sheet"
import { useSheet } from "@/hooks/use-sheet"
import { ListIcon } from "@phosphor-icons/react"
import { useTournament } from "../../queries"
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { RichTextEditor } from '@mantine/tiptap';
import { Button, Stack } from "@mantine/core"

interface RulesListButtonProps {
  tournamentId: string;
}

const RulesListButton: React.FC<RulesListButtonProps> = ({ tournamentId }) => {
  const { data: tournament } = useTournament(tournamentId);
  const { open, isOpen, toggle } = useSheet();

  const editor = useEditor({
    extensions: [StarterKit],
    content: tournament?.rules || '',
    editable: false,
  });

  return (
    <>
      <ListButton
        label={`View Rules`}
        Icon={ListIcon}
        onClick={open}
      />

      <Sheet title="Tournament Rules" opened={isOpen} onChange={toggle}>
        <Stack gap="xs">
          <RichTextEditor editor={editor}>
            <RichTextEditor.Content />
          </RichTextEditor>
          <Button variant="subtle" c="red" onClick={toggle}>Close</Button>
        </Stack>
      </Sheet>
    </>
  )
}

export default RulesListButton;