import * as cx from 'classnames'
import * as React from 'react'
import { CSSTransitionGroup } from 'react-transition-group'

import SearchSpinner from '../SearchSpinner'
import UnreadConversationPanels from '../UnreadConversationPanels'
import BlankState from './BlankState'
import ExpandedActivityGroup from './ExpandableActivityGroup'
import { IActivityFeedComponent } from './interfaces'
import SearchBlankState from './SearchBlankState'
import UnfollowedBlankState from './UnfollowedBlankState'

import './styles.styl'

class ActivityFeed extends React.Component<IActivityFeedComponent, {}> {
  constructor(props: IActivityFeedComponent) {
    super(props)
  }

  handleScroll = (event: any) => {
    try {
      const showIcon = event.target.scrollTop > 120 && !!this.props.numberOfConversations
      this.props.actions.toggleConversationIcon(showIcon)
    } catch (err) {
      // TODO
    }
  }

  hasActivities = () => {
    const {
      activityGroups,
    } = this.props

    return activityGroups.length > 0
  }

  renderActivities() {
    const {
      activityGroups,
    } = this.props

    return activityGroups.map(activityGroup => (
      <ExpandedActivityGroup
        key={activityGroup.id}
        activityGroup={activityGroup}/>
    ))
  }

  render() {
    const {
      activitiesLoading,
      activitiesLoaded,
      activityGroups,
      searchQuery,
      searchFocused,
      numberOfConversations,
      hasUnfollowEntries,
      handleManageDomainClick,
    } = this.props
    return (
      <div className="popup-feed-container" onScroll={this.handleScroll}>
        <div className="top" />
        <CSSTransitionGroup
          transitionName="unread"
          transitionEnterTimeout={400}
          transitionLeaveTimeout={400}>
          { !searchFocused && !!numberOfConversations && <UnreadConversationPanels/> }
        </CSSTransitionGroup>
        <div id="popup-feed-root" className="popup-feed">
          <h3 className="feed-header">Activity</h3>
          <div className={cx('activity-feed')}>
          {
            activitiesLoading || !activitiesLoaded
            ? <SearchSpinner />
            : activityGroups.length > 0
              ? this.renderActivities()
              : searchQuery
                  ? <SearchBlankState searchEmpty={!!searchQuery} noDomains={false} />
                : hasUnfollowEntries
                      ? <UnfollowedBlankState handleManageDomainClick={handleManageDomainClick}/>
                  : <BlankState /> 
          }
          </div>
        </div>
      </div>
    )
  }

}


export default ActivityFeed