import React from 'react'
import { Col,  Form, FormGroup, Label, Input, Container ,Row,Button} from 'reactstrap';
import Breadcrumbs from './Breadcrumbs';
import Subheader from './Subheader';
import swal from 'sweetalert'

class Feedbackform extends React.Component {
    
    constructor(props){
        super(props);
        this.state = {
            signInEmail:'',
            signInName:'',
            signInmessage:'',
            signInsection:'',
        }
    }
    
      
    onSectionChange = (event) =>{
      this.setState({signInsection: event.target.value})
    }
  
    onMessageChange = (event) =>{
      this.setState({signInmessage: event.target.value})
    }

    onEmailChange = (event) =>{
        this.setState({signInEmail: event.target.value})
    }
    
    onNameChange = (event) =>{
        this.setState({signInName: event.target.value})
    }
    
    onSubmitSignIn = (e) => {
      e.preventDefault();
      const env=process.env.NODE_ENV;
      console.log(env)
        const url = env === 'production'? 'http://35.188.161.64/server/feedback':'http://localhost:5000/feedback'
        fetch(
            url,{
            method:'post',
            headers: {'Content-Type':'application/json'},
            body:JSON.stringify({
                email:this.state.signInEmail,
                name:this.state.signInName, 
                message:this.state.signInmessage,
                section:this.state.signInsection,
            })
        })
        swal("Thanks","Feedback registered","success")
        this.props.onRouteChange("login");
        
      }

    render(){
  return (
    
    <div>
      <Breadcrumbs path="Feedback" />
        <Subheader path="Feedback" />
        <div data-aos="fade-up" data-aos-duration="1000" >
        <Container>
        <Row className="row-content">
            <Col className="bg-orange round-border" style={{padding:"5%"}}>
            <h2 className="text-white"><strong>FeedBack Form</strong></h2><br></br>
            <div className="d-flex justify-content-center align-items-center bg-white" style={{padding:"40px 10px 40px"}}>
            <Container>
            <Form onSubmit={this.onSubmitSignIn }>
            <FormGroup row>
        <Label for="user" sm={2}>Name :</Label>
        <Col sm={10}>
          <Input type="text" onChange={this.onNameChange} className="input border-0" name="name" id="user" placeholder="Your Name" ></Input>
        </Col>
      </FormGroup>
      <FormGroup row>
      <Label for="email" sm={2}>Email</Label>
        <Col sm={10}>
          <Input type="email" onChange={this.onEmailChange} name="email"  className="input border-0" id="email" placeholder="abc@gmail.com" />
        </Col>
      </FormGroup>
      
      <FormGroup tag="fieldset" row>
        <legend className="col-form-label col-sm-2">Premium Section :</legend>
        <Col sm={10}>      
          <FormGroup check>
            <Label check>
              <Input type="radio" name="service" onChange={this.onSectionChange} value="College / Career Guidance" />{' '}
              College / Career Guidance
            </Label>
          </FormGroup>
          <FormGroup check>
            <Label check>
              <Input type="radio" name="service" onChange={this.onSectionChange} value="UPSC / TNPSC"  />{' '}
              UPSC / TNPSC
            </Label>
          </FormGroup>
        </Col>
      </FormGroup>
      <FormGroup row>
        <Label for="comment"  sm={2}>FeedBack :</Label>
        <Col sm={10}>
        <Input type="textarea" className="input" onChange={this.onMessageChange} name="text" rows="3"  id="comment" />
        </Col>        
      </FormGroup>
      
      <FormGroup check row>
        <Col sm={{ size: 10, offset: 2 }}>
          <Button type="submit" className="border-0  m-3 " style={{paddingRight:"25px",paddingLeft:"25px"}}>Send Feedback</Button>

          <Button type="reset" className="border-0  p" style={{paddingRight:"25px",paddingLeft:"25px"}}>Reset</Button>
        </Col>
      </FormGroup> 
    </Form>
            </Container>
            </div>
            </Col>
        </Row>
    </Container>
    </div>
        </div>

    )}
}

export default Feedbackform