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

import { LiquidGauge } from "./LiquidGauge";
import { FlexibleGraph } from "./FlexibleGraph";

// const graphColors = ["#d7191c", "#fdae61", "#ffffbf", "#abd9e9", "#2c7bb6"];

/** Class for Main Page 
 *
 * @extends React.Component 
*/
export class Main extends Component {
	
	/**
	 * render
	 * 
	 * @returns {ReactElement} markup
	 */
	render(){
		
		if (!this.props.tagHistory || Object.keys(this.props.tagHistory).length === 0){
			return(
				<div className="container loading">
					<h1>Loading...</h1>
				</div>
			);
		}

		if (this.props.plc.error){
			return(
				<div className="container plc-error">
					<h1>PLC Error</h1>
					<h3>{this.props.plc.error}</h3>
				</div>
			);
		}

		if (!this.props.tags || 
			!this.props.tagHistory || 
			!this.props.tags.val_FluidLevel ||
			!this.props.tags.val_Flowmeter_BarrelsPerDay ||
			!this.props.tags.val_TubingPressure || 
			!this.props.tags.VFD_SpeedFdbk ||
			!this.props.tags.VFD_OutCurrent ||
			!this.props.tags.VFD_OutPower ||
			!this.props.tags.VFD_Temp ||
			!this.props.tagHistory.val_FluidLevel ||
			!this.props.tagHistory.val_Flowmeter_BarrelsPerDay ||
			!this.props.tagHistory.val_IntakePressure ||
			!this.props.tagHistory.val_IntakeTemperature ||
			!this.props.tagHistory.val_TubingPressure ||
			!this.props.tagHistory.VFD_SpeedFdbk ||
			!this.props.tagHistory.VFD_OutCurrent ||
			!this.props.tagHistory.VFD_OutPower ||
			!this.props.tagHistory.VFD_Temp
		){
			return(
				<div className="container waiting">
					<h1>Waiting for data...</h1>
				</div>
			);
		}

		
		return (
			<div className="container main">
				<h3>Process Values</h3>
				<div className="row" style={{marginBottom: "20px"}}>
					<LiquidGauge tag={this.props.tags.val_FluidLevel} units="ft." maxValue={500} label="Level" />
					<LiquidGauge tag={this.props.tags.val_Flowmeter_BarrelsPerDay} units="BPD" maxValue={5000} label="Flow Rate" />
					<LiquidGauge tag={this.props.tags.val_TubingPressure} units="PSI" maxValue={400} label="Tubing Pressure" />
				</div>
				
				<FlexibleGraph
					tagHistory={[
						this.props.tagHistory.val_FluidLevel,
						this.props.tagHistory.val_Flowmeter,
						this.props.tagHistory.val_IntakePressure,
						this.props.tagHistory.val_IntakeTemperature,
						this.props.tagHistory.val_TubingPressure
					]}
					tags={[
						this.props.tags.val_FluidLevel,
						this.props.tags.val_Flowmeter,
						this.props.tags.val_IntakePressure,
						this.props.tags.val_IntakeTemperature,
						this.props.tags.val_TubingPressure
					]}
					tagDescriptions={[
						"Level",
						"Flow Rate",
						"Intake Pres",
						"Intake Temp",
						"Tubing Pres"
					]}
					units={[
						"Ft.",
						"GPM",
						"PSI",
						"deg F",
						"PSI"
					]}
					round={[1, 2, 1, 1, 1]}
				/>
				<hr />

				<h3>VFD Data</h3>
				<div className="row" style={{marginBottom: "20px"}}>
					<LiquidGauge tag={this.props.tags.VFD_OutCurrent} units="A." maxValue={100} label="Current" />
					<LiquidGauge tag={this.props.tags.VFD_SpeedFdbk} units="Hz" maxValue={60} label="Frequency" />
				</div>
				<FlexibleGraph
					tagHistory={[
						this.props.tagHistory.VFD_SpeedFdbk,
						this.props.tagHistory.VFD_OutCurrent,
						this.props.tagHistory.VFD_OutPower,
						this.props.tagHistory.VFD_Temp
					]}
					tags={[
						this.props.tags.VFD_SpeedFdbk,
						this.props.tags.VFD_OutCurrent,
						this.props.tags.VFD_OutPower,
						this.props.tags.VFD_Temp
					]}
					tagDescriptions={[
						"Speed",
						"Current",
						"Power",
						"Temp"
					]}
					units={[
						"Hz",
						"Amps",
						"kW",
						"deg C"
					]}
					round={[2, 2, 1, 1]}
				/>
			</div>
		);
	}

}

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

export default connect(mapStateToProps)(Main);