import _ from "lodash";
import React, { Component } from "react";
import { connect } from "react-redux";
import {Timeline, TimelineEvent } from "react-event-timeline";
import FontAwesomeIcon from "@fortawesome/react-fontawesome";
import { faExclamationTriangle, faCalendar } from "@fortawesome/fontawesome-pro-regular";

import { writeTag } from "../actions/actions_tags";

export class EventLog extends Component {

	renderTimelineEvents(){
		return _.map(this.props.events, (event, key) => {
			let icon = <FontAwesomeIcon icon={faCalendar} />;
			let cardHeaderStyle = {backgroundColor: "#007bff"};
			if (event.eventType === "alarm"){
				icon = <FontAwesomeIcon icon={faExclamationTriangle} />;
				cardHeaderStyle = {backgroundColor: "#dc3545"};
			}

			return (
				<TimelineEvent
					title={event.tag}
					createdAt={event.timestamp.toString()}
					icon={icon}
					iconColor={event.eventType === "alarm" ? "#dc3545" : "#007bff"}
					container="card"
					key={key}
					cardHeaderStyle={cardHeaderStyle}
				>
					{event.text}
				</TimelineEvent>
			);
		});
	}


	render(){
		if (!this.props.events){
			return(
				<div className="loading">
					<h1>Loading...</h1>
				</div>
			);
		}
		return (
			<div className="container">
				<button
					className="btn btn-primary reset-button"
					onClick={() => this.props.writeTag("cmd_ResetAlarms", true)}
					style={{marginTop: "10px", marginBottom: "10px"}}
				>
				Reset Alarms
				</button>
				<hr />
				<Timeline>{this.renderTimelineEvents()}</Timeline>
			</div>
		);
	}
}

/**
 * Map Redux state to React props
 * 
 * @param  {Object} state
 * 
 * @returns {Object} mapped state
 */
export function mapStateToProps(state){
	return {
		events: state.events
	};
}

export default connect(mapStateToProps, { writeTag })(EventLog);