content: // @flow
  import React from 'react';
  import Card from 'infra/component/Card';
  import { timeRangeToString } from 'infra/service/util';
  import type { TimeRangeMetric } from '../service/timeRangeMetric';
  import uuid from 'uuid';
  
  type UserTop = {
    name: string,
    picture: string,
    url?: string,
    total: number,
    percent: number,
  }
  
  export const TopUserActivityTypes = {
    SCORE: 'SCORE',
    POSTS: 'POSTS',
    COMMENTS: 'COMMENTS',
    POSTS_SHARES: 'POSTS_SHARES',
    POSTS_LIKES: 'POSTS_LIKES',
  };
  
  export type TopUserActivityType = $Keys<typeof TopUserActivityTypes>
  
  const getUsers = (metric: TimeRangeMetric, type: TopUserActivityType): UserTop[] => {
    switch (type) {
      case TopUserActivityTypes.SCORE:
        return metric.usersMetric.userMetrics.sort((a, b) => b.getScore() - a.getScore()).slice(0, 10)
          .map(user => ({ ...user, total: user.getScore(), percent: +((user.getScore()/metric.usersMetric.userMetrics.map(usr => usr.getScore()).reduce((pre, cur) => pre + cur, 0))*100).toFixed(2) }));
      case TopUserActivityTypes.POSTS:
        return metric.usersMetric.sortByPostsCount().slice(0, 10)
          .map(user => ({ ...user, total: user.postsCount, percent: +((user.postsCount/metric.postsMetric.totalPosts())*100).toFixed(2) }));
      case TopUserActivityTypes.COMMENTS:
        return metric.usersMetric.sortByCommentsCount().slice(0, 10)
          .map(user => ({ ...user, total: user.commentsCount, percent: +((user.commentsCount/metric.postsMetric.totalComments())*100).toFixed(2) }));
      case TopUserActivityTypes.POSTS_SHARES:
        return metric.usersMetric.sortByPostsSharesCount().slice(0, 10)
          .map(user => ({ ...user, total: user.postsSharesCount, percent: +((user.postsSharesCount/metric.postsMetric.totalShares())*100).toFixed(2) }));
      case TopUserActivityTypes.POSTS_LIKES:
      default:
        return metric.usersMetric.sortByPostsLikesCount().slice(0, 10)
          .map(user => ({ ...user, total: user.postsLikesCount, percent: +((user.postsLikesCount/metric.postsMetric.totalLikes())*100).toFixed(2) }));
    }
  }
  
  const generateTitle = (type: TopUserActivityType): { title: string, subTitle: string } => {
    switch (type) {
      case TopUserActivityTypes.SCORE:
        return { title: 'Top User Activity by Score', subTitle: 'Top 10 user activity by score' };
      case TopUserActivityTypes.POSTS:
        return { title: 'Top User Activity by Posts', subTitle: 'Top 10 user activity by number of posts' };
      case TopUserActivityTypes.COMMENTS:
        return { title: 'Top User Activity by Comments', subTitle: 'Top 10 user activity by number of comments' };
      case TopUserActivityTypes.POSTS_LIKES:
        return { title: 'Top User Activity by Posts Likes', subTitle: 'Top 10 user activity by number of likes received on posts' };
      case TopUserActivityTypes.POSTS_SHARES:
        return { title: 'Top User Activity by Posts Shares', subTitle: 'Top 10 user activity by number of posts shares' };
      default:
        return { title: 'Top User Activity', subTitle: 'Top 10 user activity' };
    }
  }
  
  class TopUserActivity extends React.Component {
  
    props: {
      metric: TimeRangeMetric,
      type: TopUserActivityType,
    }
  
    render() {
      const { metric, type } = this.props;
  
      return (
        <Card title={generateTitle(type).title}>
          <p>{generateTitle(type).subTitle}, time range {timeRangeToString(metric.dateStart, metric.dateEnd)}.</p>
  
          <ul className="list-group">
            {getUsers(metric, type).filter(user => user.total > 0).map((user, index) => {
              const key = uuid.v4();
  
              switch (index) {
                case 0:
                  return (
                    <li key={key} className="list-group-item">
                      <div className="col-12" style={{ margin: '0 -15px' }}>
                        {user.picture ? <img alt="user pic" src={user.picture} className="mr-1 mb-1" style={{ float: 'left', width: '50px' }} /> : ''}
                        <a href={user.url} target="_blank"><h4>{user.name}</h4></a>
                        <span>Total {type.toLowerCase()} {user.total} - {user.percent ? `${user.percent}%` : ''}</span>
                      </div>
                    </li>
                  );
                case 1:
                  return (
                    <li key={key} className="list-group-item">
                      <div className="col-12" style={{ margin: '0 -15px' }}>
                        {user.picture ? <img alt="user pic" src={user.picture} className="mr-1 mb-1" style={{ float: 'left', width: '45px' }} /> : ''}
                        <a href={user.url} target="_blank"><h5>{user.name}</h5></a>
                        <span>Total {type.toLowerCase()} {user.total} - {user.percent ? `${user.percent}%` : ''}</span>
                      </div>
                    </li>
                  );
                case 2:
                  return (
                    <li key={key} className="list-group-item">
                      <div className="col-12" style={{ margin: '0 -15px' }}>
                        {user.picture ? <img alt="user pic" src={user.picture} className="mr-1 mb-1" style={{ float: 'left', width: '40px' }} /> : ''}
                        <a href={user.url} target="_blank"><h6>{user.name}</h6></a>
                        <span>Total {type.toLowerCase()} {user.total} - {user.percent ? `${user.percent}%` : ''}</span>
                      </div>
                    </li>
                  );
                default:
                  return (
                    <li key={key} className="list-group-item">
                      <a href={user.url} target="_blank">{user.name}</a>: {user.total} - {user.percent ? `${user.percent}%` : ''}
                    </li>
                  );
              }
            })}
          </ul>
        </Card>
      );
    }
  }
  
  export default TopUserActivity;
  