import { useState } from "react";
import "./App.css";

import "h8k-components";
 
function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [submittedData, setSubmittedData] = useState(null);
  const [error, setError] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();

    console.log('🔥🔥🔥THIS IS SUBMIT 🔥🔥🔥',e.target.name.value);

    const fieldArr = [
      {
        fied:'name',
        value: e.target.name.value
      },
      {
        fied:'email',
        value:e.target.email.value
      },
      {
        fied:'message',
        value:e.target.message.value
      },
    ]

    

    const emptyField = fieldArr.find((field) => isEmptyValue(field.value));

    if (emptyField) {
      setError("All fields are required.");
      setSubmittedData(null); // Clear previous data if there's an error
      return;
    }

    setError(""); // Clear error if all fields are valid
    setSubmittedData({ name, email, message }); // Set submitted data
    await resetState()
  };
  const resetState = async () =>{
    setEmail('')
    setName('')
    setMessage('')
  }

  const isEmptyValue = (e)=>{
    const isEmpty = e.length > 0 ? false:true

    return isEmpty
  }



  return (
    <>
      <h8k-navbar header="Contact Form"></h8k-navbar>
      <div className="App">
        <h1>Contact Form</h1>
        <form onSubmit={handleSubmit}>
          <input
          name="name"
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Name"
            data-testid="name-input"
            onBlur={(e)=>{
              const isEmpty = isEmptyValue(e.target.value)

              if (isEmpty) {
                setError('fill all field')
              } else {
                setError('')
                
              }
            }}
          />
          <input
          name="email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Email"
            data-testid="email-input"
            onBlur={(e)=>{
              const isEmpty = isEmptyValue(e.target.value)

              if (isEmpty) {
                setError('fill all field')
              } else {
                setError('')
                
              }
            }}
          />
          <textarea
          name="message"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder="Message"
            data-testid="message-input"
            onBlur={(e)=>{
              const isEmpty = isEmptyValue(e.target.value)

              if (isEmpty) {
                setError('fill all field')
              } else {
                setError('')
                
              }
            }}
          />
          <button type="submit" data-testid="submit-button">
            Submit
          </button>
        </form>
        {error && (
          <p data-testid="error-message" className="error">
            {error}
          </p>
        )}
        {submittedData && (
          <div data-testid="submitted-data" className="submitted-data">
            <h2>Submitted Information</h2>
            <p>
              <strong>Name:</strong> {submittedData.name}
            </p>
            <p>
              <strong>Email:</strong> {submittedData.email}
            </p>
            <p>
              <strong>Message:</strong> {submittedData.message}
            </p>
          </div>
        )}
      </div>
    </>
  );
}

export default App;