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

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

export class Controls extends Component {

	constructor(props){
		super(props);

		this.state = {
			setpoints: {}
		};
	}


	writeStart(){
		this.props.writeTag("cmd_Start", true);
	}

	writeStop(){
		this.props.writeTag("cmd_Stop", true);
	}

	onSetpointChange = (event, parName) => {
		const { value } = event.target;
		this.setState({setpoints: {...this.state.setpoints, [parName]: value}});
	}

	onSetpointSubmit = (event, parName) => {
		event.preventDefault();

		switch(parName){
		case "flowrate":
			this.props.writeTag("cfg_PID_FlowSP", this.state.setpoints.flowrate);
			break;

		case "fluidlevel":
			this.props.writeTag("cfg_PID_FluidLevelSP", this.state.setpoints.fluidlevel);
			break;

		case "tubingpressure":
			this.props.writeTag("cfg_PID_TubingPressureSP", this.state.setpoints.tubingpressure);
			break;

		case "frequency":
			this.props.writeTag("cfg_PID_ManualSP", this.state.setpoints.frequency);
			break;
		}

	}

	onPIDParameterSelect = (event, parName) => {
		event.preventDefault();

		switch(parName){
		case "flowrate":
			this.props.writeTag("cfg_PID_Flow", true);
			break;

		case "fluidlevel":
			this.props.writeTag("cfg_PID_FluidLevel", true);
			break;

		case "tubingpressure":
			this.props.writeTag("cfg_PID_TubingPressure", true);
			break;

		case "frequency":
			this.props.writeTag("cfg_PID_Manual", true);
			break;
		}
	}

	componentDidMount(){
		if (this.props.tags){
			this.setState({
				setpoints: {
					flowrate: this.props.tags.cfg_PID_FlowSP.value,
					fluidlevel: this.props.tags.cfg_PID_FluidLevelSP.value,
					tubingpressure: this.props.tags.cfg_PID_TubingPressureSP.value,
					frequency: this.props.tags.cfg_PID_ManualSP.value,
				}
			});
		}
	}



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

		if (!this.props.tags.Device_Status_INT){
			return(
				<div className="loading-nostatus">
					<h1>Loading...</h1>
				</div>
			);
		}

		const startBtnClass = this.props.tags.Device_Status_INT.value === 4 ? "btn btn-success control-button start-button" : "btn btn-secondary disabled control-button start-button";
		const stopBtnClass = this.props.tags.Device_Status_INT.value !== 4 ? "btn btn-danger control-button stop-button" : "btn btn-secondary disabled control-button stop-button";

		return (
			<div className="container controls" style={{textAlign: "center"}}>
				<h1>Controls</h1>
				<table className="table">
					<tbody>
						<tr>
							<td>
								<button
									className={startBtnClass}
									onClick={() => this.writeStart()}
								>Start</button>
							</td>

							<td>
								<button
									className={stopBtnClass}
									onClick={() => this.writeStop()}
								>Stop</button>
							</td>
						</tr>
					</tbody>
				</table>

				<hr />

				<h3>Control Setpoints</h3>
				<table className="table">
					<tbody>
						<tr>
							<td>
								<button 
									className={this.props.tags.sts_PID_Control.value === 0 ? "btn btn-success disabled flowrate-select" : "btn btn-light flowrate-select"}
									onClick={(e) => this.onPIDParameterSelect(e, "flowrate")}
								>
								Flow Rate
								</button>
							</td>
							<td>
								<button 
									className={this.props.tags.sts_PID_Control.value === 1 ? "btn btn-success disabled fluidlevel-select" : "btn btn-light fluidlevel-select"}
									onClick={(e) => this.onPIDParameterSelect(e, "fluidlevel")}
								>
								Fluid Level
								</button>
							</td>
							<td>
								<button 
									className={this.props.tags.sts_PID_Control.value === 2 ? "btn btn-success disabled tubingpressure-select" : "btn btn-light tubingpressure-select"}
									onClick={(e) => this.onPIDParameterSelect(e, "tubingpressure")}
								>
								Tubing Pressure
								</button>
							</td>
							<td>
								<button 
									className={this.props.tags.sts_PID_Control.value === 3 ? "btn btn-success disabled frequency-select" : "btn btn-light frequency-select"}
									onClick={(e) => this.onPIDParameterSelect(e, "frequency")}
								>
								Manual Frequency
								</button>
							</td>
						</tr>

						<tr>
							<td>
								<input
									value={this.state.setpoints.flowrate}
									onChange={(e) => this.onSetpointChange(e, "flowrate")}
									className="form-control flowrate-input"
									type="number"
								/>
							</td>
							<td>
								<input
									value={this.state.setpoints.fluidlevel}
									onChange={(e) => this.onSetpointChange(e, "fluidlevel")}
									className="form-control fluidlevel-input"
									type="number"
								/>
							</td>
							<td>
								<input
									value={this.state.setpoints.tubingpressure}
									onChange={(e) => this.onSetpointChange(e, "tubingpressure")}
									className="form-control tubingpressure-input"
									type="number"
								/>
							</td>
							<td>
								<input
									value={this.state.setpoints.frequency}
									onChange={(e) => this.onSetpointChange(e, "frequency")}
									className="form-control frequency-input"
									type="number"
								/>
							</td>
						</tr>

						<tr>
							<td>
								<button
									onClick={(e) => this.onSetpointSubmit(e, "flowrate")}
									className="btn btn-primary flowrate-submit"
								>
								Update
								</button>
							</td>

							<td>
								<button
									onClick={(e) => this.onSetpointSubmit(e, "fluidlevel")}
									className="btn btn-primary fluidlevel-submit"
								>
								Update
								</button>
							</td>

							<td>
								<button
									onClick={(e) => this.onSetpointSubmit(e, "tubingpressure")}
									className="btn btn-primary tubingpressure-submit"
								>
								Update
								</button>
							</td>

							<td>
								<button
									onClick={(e) => this.onSetpointSubmit(e, "frequency")}
									className="btn btn-primary frequency-submit"
								>
								Update
								</button>
							</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, { writeTag })(Controls);