import React, { Fragment, useState } from 'react';
import { Form, Nav, Button, Alert, Jumbotron } from 'react-bootstrap';
import '../styles/popUpBox.scss';

const PopUpBox = ({ currentName, creatorName, creatorEmail, currentEmail, projectName }) => {
  const [message, setMessage] = useState({
    subjectText: '',
    messageText: '',
  });

  const [show, setShow] = useState(false);

  const sendData = () => {
    setShow(true);
    const body = {
      email: currentEmail,
      subject: message.subjectText,
      message: message.messageText,
    };
    fetch('/api/sendEmail', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(body),
    });
  };

  const form = currentName ? (
    currentEmail ? (
      <Fragment>
        <Jumbotron className="jumbo">
          <h1>Let's get started on {projectName}</h1>
          <hr></hr>
          <h3>Contact {creatorName}!</h3>
          <br></br>
          <Form>
            <Form.Group controlId="Subject">
              <Form.Label>Subject</Form.Label>
              <Form.Control
                type="username"
                placeholder="Re:"
                onChange={(e) => setMessage({ ...message, subjectText: e.target.value })}
              />
              {/* onChange={setInput} /> */}
            </Form.Group>
            <Form.Group controlId="Message">
              <Form.Label>Message</Form.Label>
              <Form.Control
                as="textarea"
                rows="3"
                placeholder="Show off your skills here..."
                onChange={(e) => setMessage({ ...message, messageText: e.target.value })}
              />
            </Form.Group>
            <Button onClick={() => sendData()}>Submit</Button>
          </Form>
          {show && (
            <>
              <br></br>
              <Alert variant="success">Message sent!</Alert>
            </>
          )}
        </Jumbotron>
      </Fragment>
    ) : (
      <Fragment>
        <h1>Let's get started on {projectName}</h1>
        <br></br>
        <h3>Contact {creatorName}!</h3>
        <h3> You are {currentName}</h3>
        <br></br>
        <h1>Please register an email with your account to access messaging features!</h1>
        <Nav.Link href="/profile">Add Email Here</Nav.Link>
      </Fragment>
    )
  ) : (
    <Fragment>
      <h1> Please login first! </h1>
    </Fragment>
  );
  return form;
};

export default PopUpBox;