import { ClipboardIcon, HomeIcon } from '@heroicons/react/outline'
import clsx from 'clsx'
import { useUser } from 'web/hooks/use-user'
import { ManifoldLogo } from './manifold-logo'
import { ProfileSummary } from './profile-menu'
import React from 'react'
import TrophyIcon from 'web/lib/icons/trophy-icon'
import { SignInButton } from '../sign-in-button'
import NotificationsIcon from '../notifications-icon'
import { SidebarItem } from './sidebar-item'
import { buildArray } from 'common/util/array'
import { User } from 'common/user'
import { Row } from '../layout/row'
import { Spacer } from '../layout/spacer'

const groupNavigation = (slug: string) => [
  {
    name: 'Markets',
    key: 'markets',
    icon: HomeIcon,
    href: `/group/${slug}/markets`,
  },
  {
    name: 'About',
    key: 'about',
    icon: ClipboardIcon,
    href: `/group/${slug}/about`,
  },
  {
    name: 'Leaderboard',
    key: 'leaderboards',
    icon: TrophyIcon,
    href: `/group/${slug}/leaderboards`,
  },
]

const generalNavigation = (user?: User | null) =>
  buildArray(
    user && {
      name: 'Notifications',
      href: `/notifications`,
      key: 'notifications',
      icon: NotificationsIcon,
    }
  )

export function GroupSidebar(props: {
  groupName: string
  groupSlug: string
  className?: string
  joinOrAddQuestionsButton: React.ReactNode
  currentKey: string
}) {
  const { className, groupName, currentKey, groupSlug } = props

  const user = useUser()

  return (
    <nav
      aria-label="Group Sidebar"
      className={clsx('flex max-h-[100vh] flex-col', className)}
    >
      <ManifoldLogo className="pt-6" twoLine />
      <Row className="pl-2 text-xl text-indigo-700 sm:mt-3">{groupName}</Row>

      <div className=" min-h-0 shrink flex-col items-stretch gap-1  pt-6 lg:flex ">
        {user ? (
          <ProfileSummary user={user} />
        ) : (
          <SignInButton className="mb-4" />
        )}
      </div>

      {/* Desktop navigation */}
      {groupNavigation(groupSlug).map((item) => (
        <SidebarItem key={item.key} item={item} currentPage={currentKey} />
      ))}
      {generalNavigation(user).map((item) => (
        <SidebarItem key={item.key} item={item} currentPage={currentKey} />
      ))}

      <Spacer h={2} />

      {props.joinOrAddQuestionsButton}
    </nav>
  )
}
