import * as React from 'react';


import './index.css';
import { Timeline, TimelineEvent } from 'react-event-timeline';
import { HistoryTimeLineEvent } from '../../Models/HistoryTimelineEvent';
import { Icon } from 'office-ui-fabric-react';
import { CachingService } from '../../Services';

export class HistoryTimeline extends React.Component<any, any> {
    private _cachingService = new CachingService();


    public render(): JSX.Element {


        return (<Timeline orientation={this._cachingService.readPersistant("Language") == 1 ? "right" : "left"}>
            {this.props.events.map((event: HistoryTimeLineEvent) => {
                return (<TimelineEvent
                    icon={<Icon style={{ fontSize: 16, color: '#576a3d',fontWeight:'bold' }} {...event.iconProps}></Icon>}
                    bubbleStyle={{ backgroundColor: '#fff', border: '1px solid rgba(87, 106, 61, 0.4)', borerRadius: '50%' }}
                    style={{
                        backgroundColor: '#fff',
                        padding: 0,
                        boxShadow: 'none'
                    }}
                    contentStyle={{ margin: '0px 0px 10px 0px', padding: 0, boxShadow: 'none' }}
                >
                    {event.content}
                </TimelineEvent>
                )
            })}


        </Timeline>);
    }
}

export default HistoryTimeline;