const organizations = [
  { id: 'o0', alt: 'A', badgeContent: 10 },
  { id: 'o1', alt: 'B' },
  { id: 'o2', alt: 'C', badgeContent: 1 },
]

export const SidebarOrganizationsListItemLink: React.FC<SidebarOrganizationsListItemLinkProps> = (props) => {
  const { className: classNameProp, data: { organization }, ...restProps } = props;
  const classes = useStyles()
  const router = useRouter()

  const active = React.useMemo(() => {
    const { organizationId } = router.query

    return organizationId === organization.id
  }, [router, organization.id])
  const className: string = React.useMemo(() => {
    return clsx(classes.root, { [classes.active]: active }, classNameProp)
  }, [classes, classNameProp, active])

  return (
    <ButtonLink {...restProps} className={className}>
      <Badge color="secondary" overlap="circle" badgeContent={organization.badgeContent}>
        <Avatar className={classes.avatar}>{organization.alt}</Avatar>
      </Badge>
    </ButtonLink>
  )
}

export const SidebarOrganizationsListItem: React.FC<SidebarOrganizationsListItemProps> = (props) => {
  const { className: classNameProp, data: { organization }, ...restProps } = props;
  const classes = useStyles()

  const className: string = React.useMemo(() => {
    return clsx(classes.root, classNameProp)
  }, [classes, classNameProp])

  return (
    <li {...restProps} className={className}>
      <SidebarOrganizationsListItemLink
        data={{ organization }}
        href="/[organizationId]"
        as={`/${organization.id}`}
      />
    </li>
  )
}

export const SidebarOrganizationsList: React.FC<SidebarOrganizationsListProps> = React.memo((props) => {
  const { className, ...restProps } = props;
  const classes = useStyles();

  return (
    <ul {...restProps} className={clsx(classes.root, className)}>
      {organizations.map(organization => {
        return (
          <SidebarOrganizationsListItem key={organization.id} data={{ organization }} />
        )
      })}
    </ul>
  )
})