// @flow
import React from 'react';
import type { Event } from '../../Domain/Event';
import moment from 'moment';
import Icon from 'retail-ui/components/Icon';
import StatusIndicator from '../StatusIndicator/StatusIndicator';
import cn from './EventList.less';

type Props = {|
    items: Array<Event>,
|};

export default function EventList(props: Props): React.Element<*> {
    console.log(props);
    return (
        <section className={cn('list')}>
            <div className={cn('row', 'header')}>
                <div className={cn('name')}>Metric</div>
                <div className={cn('state-change')}>State change</div>
                <div className={cn('date')}>Event time</div>
            </div>
            {props.items.map((data, i) => {
                const { metric, old_state: oldState, state, timestamp } = data;
                return (
                    <div key={i} className={cn('row')}>
                        <div className={cn('name')}>{metric}</div>
                        <div className={cn('state-change')}>
                            <StatusIndicator statuses={[oldState]} size={14} />
                            <div className={cn('arrow')}>
                                <Icon name="ArrowBoldRight" />
                            </div>
                            <StatusIndicator statuses={[state]} size={14} />
                        </div>
                        <div className={cn('date')}>
                            {moment(timestamp).format('MMMM D, HH:mm:ss')}
                        </div>
                    </div>
                );
            })}
        </section>
    );
}

@@ -303,17 +303,17 @@
 y%3CEvent%3E
-,
+;
 %0D%0A%7C%7D;%0D%0A%0D
@@ -386,33 +386,8 @@
  %7B%0D%0A
-    console.log(props);%0D%0A
     
@@ -1223,17 +1223,17 @@
 on name=
-%22
+'
 ArrowBol
@@ -1242,9 +1242,9 @@
 ight
-%22
+'
  /%3E%0D
@@ -1446,38 +1446,8 @@
 ')%7D%3E
-%0D%0A                            
 %7Bmom
@@ -1492,34 +1492,8 @@
 s')%7D
-%0D%0A                        
 %3C/di

Fix ESlint errors