import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function ContactForm() {
    const [isSubmitted, setIsSubmitted] = useState(false);

    async function handleOnSubmit(event) {
        event.preventDefault();

        // retrieve form data using event.target
        const formData = new FormData(event.target);
        const name = formData.get('name');
        const email = formData.get('email');
        const message = formData.get('message');
        console.log(`Name: ${name}, Email: ${email}, Message: ${message}`);

        setIsSubmitted(true);
    }

    return (
        isSubmitted ? (
            <Container className={`p-3 rounded-3 border border-3`}>
                <Row className='justify-content-center'>
                    <Col xs="auto" sm="auto" className='text-center'>
                        <h2>Thank you for contacting us!</h2>
                        <p>We will get back to you soon.</p>
                    </Col>
                </Row>
            </Container>
        ) :
        <Container className={`p-3 rounded-3 border border-3`}>
            <Form onSubmit={handleOnSubmit}>
                <Form.Group className="mb-3" controlId="formName">
                    <Form.Label>Name*</Form.Label>
                    <Form.Control required name="name" type="input"/>
                </Form.Group>

                <Form.Group className="mb-3" controlId="formEmail">
                    <Form.Label>Email*</Form.Label>
                    <Form.Control required name="email" type="email" placeholder="name@example.com" />
                </Form.Group>

                <Form.Group className="mb-3" controlId="formMessage">
                    <Form.Label>Message*</Form.Label>
                    <Form.Control required  name="message" as="textarea" rows={5} />
                </Form.Group>

                <Button variant="primary" type="submit">Submit</Button>
            </Form>
        </Container>
    );
}