import Sheet from "@/components/sheet/sheet"
import TeamList from "@/features/teams/components/team-list"
import { TeamInfo } from "@/features/teams/types"
import { useSheet } from "@/hooks/use-sheet"
import { UsersIcon } from "@phosphor-icons/react"
import { useMemo } from "react"
import { useLingui } from "@lingui/react/macro"
import { msg } from "@lingui/core/macro"
import { NavTile } from "../started-tournament/sections/nav-grid"

interface TeamListButtonProps {
  teams: TeamInfo[]
  isRegional?: boolean
}

const TeamListButton: React.FC<TeamListButtonProps> = ({ teams, isRegional }) => {
  const { t, i18n } = useLingui();
  const count = useMemo(() => teams.length, [teams]);
  const { open, isOpen, toggle } = useSheet();
  return (
    <>
      <NavTile
        label={i18n._({
          ...msg`{count, plural, one {Teams (#)} other {Teams (#)}}`,
          values: { count },
        })}
        Icon={UsersIcon}
        onClick={open}
      />

      <Sheet title={t`Enrolled Teams`} opened={isOpen} onChange={toggle}>
        <TeamList teams={teams} isRegional={isRegional} />
      </Sheet>
    </>
  )
}

export default TeamListButton;
