import React from 'react';
import { style } from 'app/styles';

import { AuthorGravatarImage } from 'app/components/AuthorGravatarImage';
import { AddedDeleted } from 'app/components/AddedDeleted';
import { PercentBar } from 'app/components/PercentBar';
import { EpochSpan } from 'app/components/EpochSpan';
import { Selectable } from 'app/components/Selectable';

import { IAuthorStats } from 'app/interfaces';

export interface AuthorCardProps {
  author: IAuthorStats;
  totalLinesAdded: number;
  totalLinesDeleted: number;
  totalCommits: number;
  maxImpact: number;
  maxCommits: number;
  onClick: (evt, commit: IAuthorStats, index: number) => void;
  isHighlighted?: boolean;
  index?: number;
  style?: string | object;
}

const menuItemStyle = {
  display: 'flex',
  padding: 10,
  width: '100%',
};

const identifiersStyle = {
  _extends: 'flexColumn',
  width: '100%',
  marginLeft: 10,
};
const authorNameStyle = {
  marginBottom: 5,
};

const addedDeletedStyle = {
  float: 'none',
};

export const AuthorCard = (props: AuthorCardProps): JSX.Element => {
  const { author, maxImpact, maxCommits, index, isHighlighted } = props;
  const addStyles = isHighlighted ? 'selected' : {};

  return (
    <div style={style('flexRow', props.style)}>
      <Selectable
        style={style(menuItemStyle, addStyles)}
        onClick={evt => props.onClick(evt, author, index)}
      >
        <AuthorGravatarImage emails={author.authorEmails} />
        <div style={style(identifiersStyle)}>
          <div
            title={author.authorEmails.join(', ')}
            style={style(authorNameStyle)}
          >
            {author.authorName}
          </div>

          <div style={style('smallerText')}>
            <div>
              {author.commits.length}
              <span> commits spanning </span>
              <EpochSpan
                firstEpochTime={author.firstCommitOn}
                secondEpochTime={author.lastCommitOn}
              />
            </div>
          </div>

          <div style={style('smallerText')}>
            <span>Last commit </span>
            <EpochSpan
              firstEpochTime={author.lastCommitOn}
              secondEpochTime={Date.now() / 1000}
            />
            <span> ago</span>
          </div>
          <div style={style('smallerText')}>
            <AddedDeleted
              linesAdded={author.linesAdded}
              linesDeleted={author.linesDeleted}
              style={style(addedDeletedStyle)}
            />
            <span> lines changed </span>
          </div>
        </div>
      </Selectable>
    </div>
  );
};