import React, { Component } from 'react';
import '../../../App.css';
import uuidv4 from 'uuid/v4';

class IndividualPsid extends Component {
	constructor(props) {
		super(props);
		this.state = {
			editData: false,
			newSkuid: this.props.SkuId
		}
		this.updateState = this.updateState.bind(this);
	}
	componentDidMount() {
		this.refs.textField.focus();
	}

	componentWillReceiveProps(nextProps) {
		this.setState({ editData: nextProps.editingProp });
		this.render();
	}

	updateState(e) {
		const psid = e.target.value;
		this.setState({ newSkuid: psid }, () => {
			this.props.onPsidChange(this.props.id, this.state.newSkuid);
		});
	}

	render() {
		let member = '';
		if (this.props.editingProp) {
			member = (
				<div>
					<input type="text" id="skuids" ref="textField" value={this.state.newSkuid} key={this.state.newSkuid + uuidv4()} onChange={this.updateState}
						className="skuid col-xs-7" />
				</div>
			)
		}
		else {
			member = (
				<div key={this.props.SkuId + uuidv4()} id="skuids" className="skuid col-xs-7" >{this.props.SkuId}</div>
			)
		}
		return (
			<div className="row" >
				<div className="skuname col-xs-5">{this.props.SkuName}</div>
				{member}
			</div>);
	}


}
export default IndividualPsid;