import React from 'react';
import { Formik, Field, ErrorMessage, Form } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';
import './../styles/contact.css';

const ContactForm = () => {
  // Define validation schema using Yup
  const validationSchema = Yup.object().shape({
    name: Yup.string().required('Name is required'),
    email: Yup.string().email('Invalid email').required('Email is required'),
    message: Yup.string().required('Message is required'),
  });

  // Handle form submission
  const handleSubmit = async (values, { setSubmitting }) => {
    try {
      await axios.post('/backend/send-email', values);
      alert('Email sent successfully');
    } catch (error) {
      console.error(error);
      alert('An error occurred while sending the email');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Formik
      initialValues={{ name: '', email: '', message: '' }}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
    >
      {({ isSubmitting }) => (
        <Form className="contact-form">
          <div className="form-group">
            <label htmlFor="name">Name:</label>
            <Field type="text" id="name" name="name" />
            <ErrorMessage name="name" component="div" className="error-message" />
          </div>

          <div className="form-group">
            <label htmlFor="email">Email:</label>
            <Field type="email" id="email" name="email" />
            <ErrorMessage name="email" component="div" className="error-message" />
          </div>

          <div className="form-group">
            <label htmlFor="message">Message:</label>
            <Field as="textarea" id="message" name="message" />
            <ErrorMessage name="message" component="div" className="error-message" />
          </div>

          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default ContactForm;

require('dotenv').config({ path: './backend/.env' });
const express = require('express');
const app = express();
const path = require('path');
const nodemailer = require('nodemailer');

console.log('Server is running');

// Create a transporter using your SMTP settings
const transporter = nodemailer.createTransport({
  host: process.env.SMTP_HOST,
  port: process.env.SMTP_PORT,
  secure: true,
  auth: {
    user: process.env.SMTP_USERNAME,
    pass: process.env.SMTP_PASSWORD,
  },
  logger: true, // Enable logging
  debug: true, // Enable debug output
});

async function sendEmail(name, email, message) {
  try {
    // Send the email
    const info = await transporter.sendMail({
      from: process.env.SMTP_SENDER_EMAIL,
      to: process.env.SMTP_RECIPIENT_EMAIL,
      subject: 'New contact from submission',
      text: `
        Name: ${name}
        Email: ${email}
        Message: ${message}
      `,
    });

    console.log('Email sent successfully');
    console.log('Debug:', info.messageId, transporter.getLastMessage());
  } catch (error) {
    console.error('Error sending email:', error);
    throw error;
  }
}

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post('/send-email', (req, res) => {
  console.log('Sending Email');
  // Retrieve the form data from the request body
  const { name, email, message } = req.body;

  // Call the sendEmail function with the form data
  sendEmail(name, email, message)
    .then(() => {
      // Send a response back to the client-side (React) app
      res.json({ message: 'Email sent successfully' });
    })
    .catch((error) => {
      console.error('Error sending email:', error);
      res.status(500).json({ message: 'An error occurred while sending the email' });
    });
});

// Serve React app
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../', 'index.html'));
});

const server = app.listen(3001, () => {
  console.log('Server started on port 3001');
});

process.on('unhandledRejection', (reason, promise) => {
  console.error('Unhandled Promise Rejection:', reason);
});

process.on('SIGTERM', () => {
  server.close(() => {
    console.log('Server terminated');
    process.exit(0);
  });
});