import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import FontAwesomeIcon from "@fortawesome/react-fontawesome";
import { faTint, faCog } from "@fortawesome/fontawesome-pro-regular";
/**
 * Class to render Header navigation bar
 * 
 * @extends React.Component
 */
export class Header extends Component {

	
	/**
	 * renders the running state indicator button
	 * 
	 * @returns {button} inactive running state button
	 */
	renderRunningState(){
		if(!this.props.tags ){
			return <span className="no-tags"></span>;
		}

		if (!this.props.tags.Device_Status_INT){
			return <span className="no-device-status"></span>;
		}

		let deviceStatus;
		let deviceClass;
		switch(this.props.tags.Device_Status_INT.value){
		case 0:
			deviceStatus = "Running";
			deviceClass = "btn btn-success";
			break;
		case 1:
			deviceStatus = "Pumped Off";
			deviceClass = "btn btn-warning";
			break;
		case 2:
			deviceStatus = "Alarmed";
			deviceClass = "btn btn-danger";
			break;
		case 3:
			deviceStatus = "Locked Out";
			deviceClass = "btn btn-danger";
			break;
		case 4:
			deviceStatus = "Stopped";
			deviceClass = "btn btn-secondary";
			break;
		default:
			deviceStatus = "Unknown";
			deviceClass = "btn btn-info";
		}

		return <button className={deviceClass + " disabled status-indicator"}>{deviceStatus}</button>;

	}

	/**
	 * renders the alarm button
	 * 
	 * @returns {button} button showing alarm status with link  to alarm log
	 */
	renderAlarmButton(){
		if (!this.props.alarms){
			return <span className="no-alarm"></span>;
		}

		const btnClassName = this.props.alarms.length > 0 ? "btn btn-danger alarms-active alarm-button" : "btn btn-light alarm-button";
		const btnText = this.props.alarms.length > 0 ? `Alarms Active: ${this.props.alarms.length}` : "No Alarms";

		return (
			<Link
				style={{marginRight: "10px"}}
				to="/events" 
				className={btnClassName}
			>{btnText}
			</Link>
		);

	}


	/**
	 * render method
	 * 
	 * @returns markup
	 */
	render(){
		return (
			<nav className="navbar navbar-light navbar-expand-sm bg-light">
				<Link to="/" className="navbar-brand">
					<FontAwesomeIcon icon={faTint} /> Max Water System
				</Link>
				<div className="navbar-nav">
					<Link className="nav-item nav-link" to="/controls">Control</Link>
					<Link className="nav-item nav-link" to="/permissives">Permissives</Link>
					<Link className="nav-item nav-link" to="/alltags">All Tags</Link>
				</div>
				<div className="navbar-nav ml-auto">
					<span className="navbar-text">{this.renderAlarmButton()}</span>
					<span className="navbar-text">{this.renderRunningState()}</span>
					<Link className="nav-item nav-link" to="/settings" id="settings-button"><FontAwesomeIcon icon={faCog} /></Link>
				</div>
			</nav>
		);
	}
}

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

export default connect(mapStateToProps)(Header);

