import React from 'react'
import { A, IndexA } from './A'
import Icon from './Icon'
import { VelocityTransitionGroup } from 'velocity-react'
import { isEmpty, filter } from 'lodash'
import { tagUrl } from '../routes'
import { isMobile } from '../client/util'

export const leftNavWidth = 208 // this value is dupicated in CSS
export const leftNavEasing = [70, 25]

const animations = {
  enter: {
    animation: {translateX: [0, '-100%']},
    easing: leftNavEasing
  },
  leave: {
    animation: {translateX: '-100%'},
    easing: leftNavEasing
  }
}

export const MenuButton = ({ onClick, label }) =>
  <a className='menu-button' onClick={onClick}>
    <div className='hamburger'>
      <div className='bar'></div>
      <div className='bar'></div>
      <div className='bar'></div>
    </div>
    <span>{label || 'Menu'}</span>
  </a>

export const TopicList = ({ tags, slug }) => {
  let followedTags = filter(tags, t => t.followed && !t.created)
  let createdTags = filter(tags, t => t.created && t.name !== 'chat')

  const TagLink = ({ name }) => {
    var allTopics = name === 'all-topics'
    var AComponent = allTopics ? IndexA : A
    return <li>
      <AComponent to={tagUrl(name, slug)}>
        <span className='bullet'>•</span>&nbsp;&nbsp;# {name}
      </AComponent>
    </li>
  }

  return <ul className='topic-list'>
    <li className='subheading'><a>TOPICS ({followedTags.length + 1})</a></li>
    <TagLink name='all-topics'/>
    {!isEmpty(followedTags) && followedTags.map(tag =>
      <TagLink name={tag.name} key={tag.name} />)}
    {!isEmpty(createdTags) && <li className='subheading'>
      <a>TOPICS CREATED ({createdTags.length})</a>
    </li>}
    {!isEmpty(createdTags) && createdTags.map(tag =>
      <TagLink name={tag.name} key={tag.name} />)}
  </ul>
}

const CommunityNav = ({ community, canModerate, canInvite }) => {
  const { slug, network } = community
  const url = slug ? suffix => `/c/${slug}/${suffix}` : suffix => '/' + suffix

  return <ul>
    <li>
      <IndexA to={slug ? `/c/${slug}` : '/app'}>
        <Icon name='Comment-Alt'/> Conversations
      </IndexA>
    </li>
    <li>
      <A to={url('events')}><Icon name='Calendar'/> Events</A>
    </li>
    <li>
      <A to={url('projects')}><Icon name='ProjectorScreen'/> Projects</A>
    </li>
    {community && <li>
      <A to={url('members')}><Icon name='Users'/> Members</A>
    </li>}
    {community && <li>
      <A to={url('about')}><Icon name='Help'/> About</A>
    </li>}
    {canInvite && <li>
      <A to={url('invite')}><Icon name='Mail'/> Invite</A>
    </li>}
    {network && <li>
      <A to={`/n/${network.slug}`}><Icon name='merkaba'/>Network</A>
    </li>}
    {canModerate && <li>
      <A to={url('settings')}><Icon name='Settings'/> Settings</A>
    </li>}
  </ul>
}

const NetworkNav = ({ network }) => {
  const { slug } = network
  const url = suffix => `/n/${slug}/${suffix}`

  return <ul>
    <li>
      <IndexA to={`/n/${slug}`}>
        <Icon name='Comment-Alt'/> Conversations
      </IndexA>
    </li>
    <li>
      <A to={url('communities')}><Icon name='Keypad'/> Communities</A>
    </li>
    <li>
      <A to={url('members')}><Icon name='Users'/> Members</A>
    </li>
    <li>
      <A to={url('about')}><Icon name='Help'/> About</A>
    </li>
  </ul>
}

export const LeftNav = ({ opened, community, network, tags, close, canModerate, canInvite }) => {
  const onMenuClick = event => {
    close()
    event.stopPropagation()
  }

  return <VelocityTransitionGroup {...animations}>
    {opened && <nav id='leftNav' onClick={() => isMobile() && close()}>
      <MenuButton onClick={onMenuClick}/>
      {community && <CommunityNav community={community} canModerate={canModerate} canInvite={canInvite} />}
      {network && <NetworkNav network={network} />}
      {!isEmpty(tags) && <TopicList tags={tags} slug={community.slug}/>}
    </nav>}
  </VelocityTransitionGroup>
}

export default LeftNav

@@ -1883,16 +1883,22 @@
 ommunity
+ %7C%7C %7B%7D
 %0A  const
@@ -3637,28 +3637,76 @@
 %0A      %7B
-community &&
+network%0A        ? %3CNetworkNav network=%7Bnetwork%7D /%3E%0A        :
  %3CCommun
@@ -3759,16 +3759,28 @@
 oderate%7D
+%0A           
  canInvi
@@ -3797,61 +3797,8 @@
 ite%7D
- /%3E%7D%0A      %7Bnetwork && %3CNetworkNav network=%7Bnetwork%7D 
 /%3E%7D%0A

fix left nav for All Communities