import React, { Component } from "react";
import { connect } from "react-redux";

export class Permissives extends Component {

	renderTagButton = (tagName, description) => {
		if (!this.props.tags[tagName]){
			return(
				<button
					className="btn disabled"
				>
					{description}
				</button>
			);
		}

		const btnClassName = this.props.tags[tagName].value ? "btn btn-success" : "btn btn-danger";
		return <button className={btnClassName + " disabled"}>{description}</button>;
	}

	render(){
		if (!this.props.tags){
			return (
				<div className="loading">
					<h2>Loading...</h2>
				</div>
			);
		}

		return(
			<div className="permissives">
				<table id="permissives-table" className="table">
					<thead>
						<tr>
							<th>{this.renderTagButton("sp_ALL", "START")}</th>
							<th>{this.renderTagButton("rp_ALL", "RUN")}</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>{this.renderTagButton("sp_Flowmeter", "Flowmeter")}</td>
							<td>{this.renderTagButton("rp_Flowmeter", "Flowmeter")}</td>
						</tr>

						<tr>
							<td>{this.renderTagButton("sp_FluidLevel", "Fluid Level")}</td>
							<td>{this.renderTagButton("rp_FluidLevel", "Fluid Level")}</td>
						</tr>

						<tr>
							<td>{this.renderTagButton("sp_IntakePressure", "Intake Pressure")}</td>
							<td>{this.renderTagButton("rp_IntakePressure", "Intake Pressure")}</td>
						</tr>

						<tr>
							<td>{this.renderTagButton("sp_IntakeTemperature", "Intake Temperature")}</td>
							<td>{this.renderTagButton("rp_IntakeTemperature", "Intake Temperature")}</td>
						</tr>
					</tbody>

				</table>
			</div>
		);
	}

}

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

export default connect(mapStateToProps)(Permissives);