import React, { Component } from "react";
import { connect } from "react-redux";
import _ from "lodash";
import { setPlcIpAddress, ipcPlcInitializeSend } from "../actions/actions_plc";
import { storeNewTag, deleteTag } from "../actions/actions_tags";
import FontAwesomeIcon from "@fortawesome/react-fontawesome";
import { faTimesSquare } from "@fortawesome/fontawesome-pro-regular";

export class Settings extends Component {
	constructor(props){
		super(props);

		this.state = {
			ipAddress: "",
			newTag: {tagName: null, vanityName: null, storePeriod: null, storeChangeDelta: null},
			editTag: {}
		};
	}

	getTagList = () => {
		const { tags } = this.props;

		return _.map(tags, (tag, key) => {
			return (
				<tr key={key}>
					<td className="tagName">{tag.tagName}</td>
					<td className="vanityName">{tag.vanityName}</td>
					<td className="storePeriod">{tag.storePeriod}</td>
					<td className="storeChangeDelta">{tag.storeChangeDelta}</td>
					<td className="deleteButton">
						<button
							className="btn btn-outline-danger float-right delete-button"
							onClick={(e) => this.onDeleteClick(e, tag.tagName)}
						>
							<FontAwesomeIcon icon={faTimesSquare} />
						</button>
					</td>
				</tr>
			);
		});
	}

	componentWillMount(){
		if (this.props.plc && this.props.plc.ipAddress){
			this.setState({ipAddress: this.props.plc.ipAddress});
		}
	}

	onDeleteClick = (e, tagName) =>{
		e.preventDefault();
		this.props.deleteTag(tagName);
	}

	onIpAddressInputChange = (event) => {
		this.setState({ipAddress: event.target.value});
	}

	sendIpAddress = (e) => {
		e.preventDefault();
		this.props.setPlcIpAddress(this.state.ipAddress);
	}

	onNewTagChange = (e, paramName) => {
		const newTag = this.state.newTag;
		newTag[paramName] = e.target.value;
		this.setState({newTag});
	}

	onNewTagSubmit = (e) => {
		e.preventDefault();
		this.props.storeNewTag(this.state.newTag);
		this.setState({newTag: {tagName: null, vanityName: null, storePeriod: null, storeChangeDelta: null}});
	}

	onSave = (e) => {
		e.preventDefault();
		this.props.ipcPlcInitializeSend(this.props.plc.ipAddress, this.props.tags);
		this.props.history.push("/");
	}

	render() {
		const ipAddressBtnClass = ((this.state.ipAddress === this.props.plc.ipAddress) || (this.state.ipAddress.length === 0)) ? "disabled" : "";
		const initializeBtnClass = (this.props.plc.ipAddress && _.map(this.props.tags, (t)=>t).length > 0) ? "" : "disabled";

		return (
			<div className="container settings">
				<h1>Settings</h1>
				<form className="form-inline">
					<div className="form-group">
						<label htmlFor="ipAddress">IP Address</label>
						<input
							id="ipAddress"
							className="form-control	ip-address-field m-2"
							value={this.state.ipAddress}
							placeholder="PLC IP Address"
							onChange={this.onIpAddressInputChange}
						/>
						<button
							className={ipAddressBtnClass + " btn btn-primary ip-submit-button  m-2"}
							onClick={(e) => this.sendIpAddress(e)}>
						Set IP Address
						</button>
					</div>
				</form>


				<h4>Tag List</h4>
				{/* <ul className="list-group tag-list">
					{this.getTagList()}
				</ul> */}
				<table className="table tag-list">
					<thead>
						<tr>
							<th>Tag Name (in PLC)</th>
							<th>Vanity Name</th>
							<th>Store Period (min.)</th>
							<th>Store Change Delta</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						{this.getTagList()}
					</tbody>
				</table>

				<hr />
				
				<form className="form-inline">
					<div className="form-group">
						{/* <label htmlFor="tag-name-input">New Tag</label> */}
						<input
							value={this.state.newTag.tagName}
							onChange={(e) => this.onNewTagChange(e, "tagName")}
							placeholder="New Tag Name..."
							className="tag-name-input form-control m-2"
							id="tag-name-input"
						/>

						{/* <label htmlFor="tag-vanityname-input">Vanity Name</label> */}
						<input
							value={this.state.newTag.vanityName}
							onChange={(e) => this.onNewTagChange(e, "vanityName")}
							placeholder="Vanity Name..."
							className="tag-vanityname-input form-control m-2"
							id="tag-vanityname-input"
						/>

						{/* <label htmlFor="tag-storeperiod-input">Store Period</label> */}
						<input
							value={this.state.newTag.storePeriod}
							onChange={(e) => this.onNewTagChange(e, "storePeriod")}
							placeholder="Store Period..."
							className="tag-storeperiod-input form-control m-2"
							id="tag-storeperiod-input"
						/>

						{/* <label htmlFor="tag-storechangedelta-input">Store Change Delta</label> */}
						<input
							value={this.state.newTag.storeChangeDelta}
							onChange={(e) => this.onNewTagChange(e, "storeChangeDelta")}
							placeholder="Store Change Delta..."
							className="tag-storechangedelta-input form-control m-2"
							id="tag-storechangedelta-input"
						/>

						<button
							className="btn btn-success float-right add-tag-button  m-2"
							onClick={(e) => this.onNewTagSubmit(e)}
						>Add Tag</button>
					</div>
				</form>
				<hr />
				<div>
					<button
						className={initializeBtnClass + " btn btn-success save-button"}
						onClick={(e) => this.onSave(e)}
					>Save</button>
				</div>
				
				<hr />

			</div>
		);
	}
}


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

export default connect(mapStateToProps, { setPlcIpAddress, storeNewTag, ipcPlcInitializeSend, deleteTag })(Settings);
