import Image from "next/image";
import React, { useState } from "react";
import { Button } from "react-bootstrap";
import { newsletter } from "../../redux/actions/newsletterAction";
import { toast } from "react-toastify";

const Footer = () => {
  const [email, setEmail] = useState('');
  const [isValidEmail, setIsValidEmail] = useState(true);

  const validateEmail = () => {
    // Regular expression for email validation
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (validateEmail()) {
      // Email is valid, perform your action (e.g., subscribe)
      const res = await newsletter(email);
      console.log("res", res.data);
      // Reset email input field after successful submission
      setEmail('');
      setIsValidEmail(true);
      toast.success("Subscribed successful!");
    } else {
      // Email is not valid, show error message or handle as you wish
      setIsValidEmail(false);
    }
  };
  return (
    <>
      <footer>
        <div className="container-fluid">
          <div className="row">
            <div className="col-md-9">
              <div className="footer-logo">
                <span className="image-container">
                  <Image layout="fill" className="image img-fluid" alt="" src="/images/Zango-logo-footer.svg" />
                </span>
              </div>
              <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </div>
            </div>
            <div className="col-md-3">
              <div className="footer-link">
                <h3>VENDOR SIGN UP</h3>
                <div className="">
                  <Button href="/login/vendor" variant="light me-3">
                    Log In
                  </Button>
                  <Button href="/signup/vendor" variant="primary">
                    Sign Up
                  </Button>
                </div>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-12">
              <hr />
            </div>
          </div>
          <div className="row">
            <div className="col-md-3">
              <div className="footer-link mtp-0">
                <h3>QUICK LINKS</h3>
                <ul>
                  <li>
                    <a href="/about-us">About Us</a>
                  </li>
                  <li>
                    <a href="/contact-us">Contact Us</a>
                  </li>
                  <li>
                    <a href="">Corporate Programs</a>
                  </li>
                  <li>
                    <a href="">Private Events</a>
                  </li>
                  <li>
                    <a href="">Promo T & C’s</a>
                  </li>
                  <li>
                    <a href="">Gifting</a>
                  </li>
                </ul>
              </div>
            </div>
            <div className="col-md-3">
              <div className="footer-link">
                <h3>CONTACT </h3>
                <div className="icon-text">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/location.svg" />
                  </span>
                  <div className="text">
                    <a href="">Lorem ipsum dolor sit amet</a>
                  </div>
                </div>
                <div className="icon-text">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/email.svg" />
                  </span>
                  <div className="text">
                    <a href="mailTo:zango@gmail.com">zango@gmail.com</a>
                  </div>
                </div>
                <div className="icon-text">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/phone-call.svg" />
                  </span>
                  <div className="text">
                    <a href="">+91-8798798798</a>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-md-3">
              <div className="footer-link">
                <h3>HELP</h3>
                <ul>
                  <li>
                    <a href="/terms-and-conditions">Terms & Policy</a>
                  </li>
                  <li>
                    <a href="/privacy-policy">Privacy Policy</a>
                  </li>
                  <li>
                    <a href="">Careers</a>
                  </li>
                  <li>
                    <a href="">FAQs</a>
                  </li>
                </ul>
              </div>
            </div>
            <div className="col-md-3">
              <div className="footer-link mb-3">
                <h3>FOLLOW US ON</h3>
                <div className="social-icon">
                  <a href="">
                    <span className="image-container">
                      <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/facebook.svg" />
                    </span>
                  </a>
                  <a href="">
                    <span className="image-container">
                      <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/twitter.svg" />
                    </span>
                  </a>
                  <a href="">
                    <span className="image-container">
                      <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/instagram.svg" />
                    </span>
                  </a>
                </div>
              </div>
              <div className="footer-link">
                <h3>JOIN OUR COMMUNITY</h3>
                <div>Subscribe to gt information, latest news and other interesting offers</div>
                <div className="subscribe">
                <form onSubmit={handleSubmit}>
                    <div className="row">
                      <div className="col-12 d-flex align-items-center justify-content-between">
                        <input
                          id="subscribe"
                          onChange={e => {
                            setEmail(e.target.value);
                            setIsValidEmail(true);
                          }}
                          type="text"
                          value={email}
                          placeholder="Email Address"
                        />
                        
                        <label htmlFor="subscribe">
                          <Button variable="primary" type="submit">Subscribe </Button>
                        </label>
                        
                      </div>
                    </div>
                    <div className="row">
                      <div className="col-12">
                      {!isValidEmail && (
                              <div style={{ color: 'red' }}>Please enter a valid email address.</div>
                            )}
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>
      <div className="copyright">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div>Copyright © 2024 ZanGO. All Rights Reserved</div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Footer;