import React from 'react';

function icon4context(context) {
    if(context=== 'bitHound - Code') {
        return (<img width={48} height={48} src="./assets/images/bithound.png" alt="bitHound - Code"/>);
    }
    if(context=== 'bitHound - Dependencies') {
        return (<img width={48} height={48} src="./assets/images/bithound.png" alt="bitHound - Dependencies"/>);
    }
    if(context=== 'codacy/pr') {
        return (<img width={48} height={48} src="./assets/images/codacy.png" alt="codacy"/>);
    }
    if(context=== 'ci/circleci') {
        return (<img width={48} height={48} src="./assets/images/circleci.png" alt="circleci"/>);
    }

    return (<span>{ context }</span> );
}

function icon4status(status) {
    if(status=== 'success') {
        return (<span className="glyphicon glyphicon-ok green"></span>);
    }
    if(status=== 'pending') {
        return (<span className="glyphicon glyphicon-hourglass orange"></span>);
    }
    if(status=== 'failure') {
        return (<span className="glyphicon glyphicon-remove red"></span>);
    }
    if(status=== 'error') {
        return (<span className="glyphicon glyphicon-remove red"></span>);
    }
    return (<span>{ status }</span> );
}

function status2color(status) {
    if(status=== 'success') {
        return 'green';
    }
    if(status=== 'pending') {
        return 'orange';
    }
    if(status=== 'failure') {
        return 'red';
    }
    if(status=== 'error') {
        return 'red';
    }
    return 'inherit';
}

function renderStatus(status, idx) {
    const color = status2color(status.state);

    return (
        <div key={idx} style={ { display: 'inline' } }>
            <a className="commitLink" href={status.target_url} style={{ color: color }}
                title={ status.context + ' ' + status.description }>
                {icon4context(status.context)}{icon4status(status.state)}
            </a>
        </div>
    );
}

let CommitWithStatus = props => {
    const { commit = {} } = props;
    const { sha = '<missing>', date = '', message = '<missing>', status = [] } = commit;
    const { author = {} } = props.commit;

    const githubCommit = `https://github.com/lowsky/dashboard/tree/${sha}`;

    return (
        <div key={sha}>
            <a href={githubCommit}>
                <b>{ message.split('\n\n', 1) }</b>
            </a>
            <br />
            <span><i>{date}</i></span>
            &nbsp;
            by
            &nbsp;
            <img width={32} src={author.avatar_url} />
            &nbsp;
            {author.login}
            <a href={'mailto:' + author.email}>{author.name}</a>
            <br/>
                {
                    status.map((s, idx) => renderStatus(s, idx))
                }
        </div>
    );
};

export default CommitWithStatus;

@@ -21,16 +21,131 @@
 eact';%0A%0A
+const ContextLogo = (props) =%3E (%0A    %3Cimg width=%7B48%7D height=%7B48%7D %7B...props%7D style=%7B %7BverticalAlign: 'top' %7D %7D /%3E%0A)%0A
 function
@@ -171,32 +171,33 @@
 xt) %7B%0A    if
+ 
 (context
 === 'bitHoun
@@ -176,32 +176,33 @@
 %0A    if (context
+ 
 === 'bitHound - 
@@ -231,34 +231,19 @@
 n (%3C
-img width=%7B48%7D height=%7B48%7D
+ContextLogo
  src
@@ -308,32 +308,33 @@
     %7D%0A    if
+ 
 (context
 === 'bitHoun
@@ -317,24 +317,25 @@
  if (context
+ 
 === 'bitHoun
@@ -376,34 +376,19 @@
 n (%3C
-img width=%7B48%7D height=%7B48%7D
+ContextLogo
  src
@@ -461,32 +461,33 @@
     %7D%0A    if
+ 
 (context
 === 'codacy/
@@ -470,24 +470,25 @@
  if (context
+ 
 === 'codacy/
@@ -515,34 +515,19 @@
 n (%3C
-img width=%7B48%7D height=%7B48%7D
+ContextLogo
  src
@@ -585,24 +585,25 @@
 %7D%0A    if
+ 
 (context
 === 'ci/
@@ -594,16 +594,17 @@
 (context
+ 
 === 'ci/
@@ -637,34 +637,19 @@
 n (%3C
-img width=%7B48%7D height=%7B48%7D
+ContextLogo
  src
@@ -675,18 +675,18 @@
 ircleci.
-pn
+sv
 g%22 alt=%22
@@ -780,33 +780,144 @@
 atus) %7B%0A    
-if
+const StatusIcon = (%7Btype%7D) =%3E (%3Ci className=%22material-icons%22 style=%7B %7BfontSize: '48px'%7D %7D%3E%7Btype%7D%3C/i%3E);%0A%0A    if 
 (status
+ 
 === 'success
@@ -940,64 +940,35 @@
 urn 
-(%3Cspan className=%22glyphicon glyphicon-ok green%22%3E%3C/span%3E)
+%3CStatusIcon type='check' /%3E
 ;%0A  
@@ -969,39 +969,41 @@
 /%3E;%0A    %7D%0A    if
+ 
 (status
+ 
 === 'pending') %7B
@@ -1022,72 +1022,45 @@
 urn 
-(%3Cspan className=%22glyphicon glyphicon-hourglass orange%22%3E%3C/span%3E)
+%3CStatusIcon type='hourglass_empty' /%3E
 ;%0A  
@@ -1061,39 +1061,41 @@
 /%3E;%0A    %7D%0A    if
+ 
 (status
+ 
 === 'failure') %7B
@@ -1114,66 +1114,36 @@
 urn 
-(%3Cspan className=%22glyphicon glyphicon-remove red%22%3E%3C/span%3E)
+%3CStatusIcon type='cancel' /%3E
 ;%0A  
@@ -1144,39 +1144,41 @@
 /%3E;%0A    %7D%0A    if
+ 
 (status
+ 
 === 'error') %7B%0A 
@@ -1195,66 +1195,35 @@
 urn 
-(%3Cspan className=%22glyphicon glyphicon-remove red%22%3E%3C/span%3E)
+%3CStatusIcon type='error' /%3E
 ;%0A  
@@ -1244,16 +1244,17 @@
  (%3Cspan%3E
+?
 %7B status
@@ -1255,16 +1255,17 @@
 status %7D
+ 
 %3C/span%3E 

add material-design to commit status