import Sheet from "@/components/sheet/sheet"
import { useSheet } from "@/hooks/use-sheet"
import { ListIcon } from "@phosphor-icons/react"
import { Trans, useLingui } from "@lingui/react/macro"
import { useTournament } from "../../queries"
import { Button, Flex, Loader, Stack } from "@mantine/core"
import { lazy, Suspense } from "react"
import { NavTile } from "../started-tournament/sections/nav-grid"
import { track } from "@/lib/telemetry/client"

const RulesContent = lazy(() => import("./rules-content"));

interface RulesListButtonProps {
  tournamentId: string;
}

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

  return (
    <>
      <NavTile
        label={t`Rules`}
        Icon={ListIcon}
        onClick={() => {
          track("rules_viewed", { source: "upcoming" });
          open();
        }}
      />

      <Sheet title={t`Tournament Rules`} opened={isOpen} onChange={toggle}>
        <Stack gap="xs">
          <Suspense
            fallback={
              <Flex justify="center" align="center" w="100%" style={{ minHeight: '25vh' }}>
                <Loader size="lg" />
              </Flex>
            }
          >
            <RulesContent content={tournament?.rules || ''} />
          </Suspense>
          <Button variant="subtle" c="red" onClick={toggle}><Trans>Close</Trans></Button>
        </Stack>
      </Sheet>
    </>
  )
}

export default RulesListButton;