import React, { Component } from 'react';
import Header from './Header.js';
import '../Input.css';

class Contact extends Component{

	state = {
		fname: 'fname',
		lname: 'lname',
		email: 'email',
		question: 'question',
		button: 'disabled'
	};

	editFname(newValue) {
		this.setState({
			fname: newValue
		});
	}

	editLname(newValue) {
		this.setState({
			lname: newValue
		});
	}

	editEmail(newValue) {
		this.setState({
			email: newValue
		});
	}

	editQuestion(newValue) {
		this.setState({
			question: newValue
		});
	}

	editButton(newValue) {
		this.setState({
			button: newValue
		})
	}

	checkAll(){
		var fname = document.getElementById("fname");
    	var lname = document.getElementById("lname")
    	var email = document.getElementById("email");
		if (fname.value != '' & lname.value != '' & email.value != '') {
			this.editButton('');
		} else {
			this.editButton('disabled');
		}
	}

	showMessage(){
		var fname = document.getElementById("fname");
    	var lname = document.getElementById("lname")
    	var email = document.getElementById("email");
    	var question = document.getElementById("question");
		if (question.value != 0) {alert("Hej " + fname.value + " " + lname.value + ", tak for din besked, hvor du skrev: \"" + question.value + "\". Vi vender tilbage til dig på din email " + email.value + " snarest muligt.");
    	}
   		else{
    		alert("Hej " + fname.value + " " + lname.value + ", tak fordi du valgte at tilmelde dig yderligere information om ITU. Da du ikke har stillet et spørgsmål vil du blot modtage nyheder om ITU på din email " + email.value +".");
    	}
    	fname.value = "";
    	lname.value = "";
    	email.value = "";
    	question.value = "";
	}

	showClearCheck(event){
		this.showMessage();
		this.checkAll();
	}

	render(){
	return (
		<div className="Contact">
			<Header title="Contact" />
			<h2>Kontaktformular</h2>
			<p>Udfyld kontaktformularen for at skrive dig op til yderligere information om ITU.</p>
			<div className="container">
			  <form action="/action_page.php">
			    <div className="row">
			      <div className="col-25">
			        <label form="fname">First Name</label>
			      </div>
			      <div className="col-75">
			        <input onChange={event => this.editFname(event.target.value) & this.checkAll()} type="text" id="fname" name="firstname" placeholder="First name..."/>
			      </div>
			    </div>
			    <div className="row">
			      <div className="col-25">
			        <label form="lname">Last Name</label>
			      </div>
			      <div className="col-75">
			        <input onChange={event => this.editLname(event.target.value) & this.checkAll()} type="text" id="lname" name="lastname" placeholder="Last name..."/>
			      </div>
			    </div>
			    <div className="row">
			      <div className="col-25">
			        <label form="email">Email</label>
			      </div>
			      <div className="col-75">
			        <input onChange={event => this.editEmail(event.target.value) & this.checkAll()} type="text" id="email" name="email" placeholder="Email..."/>
			      </div>
			    </div>
			    <div className="row">
			      <div className="col-25">
			        <label form="Question">Question</label>
			      </div>
			      <div className="col-75">
			        <textarea id="question" name="question" placeholder="Your question..."></textarea>
			      </div>
			    </div>
			    <div className="row">
			      <button onClick={event => this.showClearCheck()}  id="knap" type="Button" disabled={this.state.button == "disabled"}>Submit</button>
			    </div>
			  </form>
			</div>
		</div>
	)
}
}
export default Contact;