import React, {Component} from "react";
import emailjs from "emailjs-com";
import {createGlobalStyle} from 'styled-components';
import {Spring} from 'react-spring/renderprops'
import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, StyledTextAreaSubject, ButtonSet, Modal} from "./assets/StyledContactForm.js";
import './assets/Contact.scss';
// If you need anything for this ask Ram Reddy.
const GlobalStyle = createGlobalStyle`
html {
height: 100%
}
body {
background-color: #293241;
font-family: Poppins, sans-serif;
height: 100%;
margin: 0;
color: #555;
}
`;
class ContactForm extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
subject: '',
message: '',
error:'',
show:false
};
this.handleNameChange = this.handleNameChange.bind(this);
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handleSubjectChange = this.handleSubjectChange.bind(this);
this.handleMessageChange = this.handleMessageChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.scrollDown = this.scrollDown.bind(this);
this.showModal = this.showModal.bind(this);
this.hideModal = this.hideModal.bind(this);
}
showModal = () => {
this.setState({ show: true });
};
hideModal = () => {
this.setState({ show: false });
};
handleNameChange(event) {
this.setState({
name: event.target.value
});
}
handleEmailChange(event) {
this.setState({
email: event.target.value
});
}
handleSubjectChange(event) {
this.setState({
subject: event.target.value
});
}
handleMessageChange(event) {
this.setState({
message: event.target.value
});
}
async handleSubmit(event) {
event.preventDefault();
var i = 0;
for (let key in this.state) {
if (this.state[key] === '' && i<4) {
this.setState({error: `You must provide a ${key}`});
return
}
i++;
}
this.setState({error: ``});
emailjs.sendForm('service_5ggwj8d', 'template_jirc6zm', event.target, 'user_XtSzEFFNtc4C6IEpGN9JS')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
event.target.reset();
this.showModal()
}
scrollDown(id) {
const element = document.getElementById(id);
element.scrollIntoView({
behavior: "smooth",
block: "end",
inline: "nearest"
});
}
render() {
return (
<>
Contact Us
{this.state.error}
Send Message
We have recieved your message!
You will recieve an email from us shortly.
Below are the details you have submitted:
Name: {this.state.name}
Email: {this.state.email}
Subject: {this.state.subject}
Message: {this.state.message}
);
}
}
export default ContactForm;