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";
import Link from "next/link";

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">
                <a href="/" className="image-container">
                  <Image layout="fill" className="image img-fluid" alt="" src="/images/Footer-logo.svg" />
                </a>
              </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="vendor-signup">
                  <Button href="/login/vendor" variant="light me-3 mb-md-2 mb-lg-0 mb-0">
                    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-sm-12 col-md-6 col-lg-3">
              <div className="footer-link mtp-0">
                <h3>QUICK LINKS</h3>
                <ul>
                  <li>
                    <Link prefetch href="/about-us">
                      About Us
                    </Link>
                  </li>
                  <li>
                    <Link prefetch href="/contact-us">
                      Contact Us
                    </Link>
                  </li>
                </ul>
              </div>
            </div>
            <div className="col-sm-12 col-md-6 col-lg-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="Tel:+91-8798798798">+91-8798798798</a>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-sm-12 col-md-6 col-lg-3  mt-md-4">
              <div className="footer-link">
                <h3>HELP</h3>
                <ul>
                  <li>
                    <Link prefetch href="/terms-and-conditions">
                      Terms & Policy
                    </Link>
                  </li>
                  <li>
                    <Link prefetch href="/privacy-policy">
                      Privacy Policy
                    </Link>
                  </li>
                  <li>
                    <Link prefetch href="/cancellation-refund-policy">
                      Cancellation / Refund Policy
                    </Link>
                  </li>
                  <li>
                    <Link prefetch href="/disclaimer">
                      Disclaimer
                    </Link>
                  </li>
                  {/* <li>
                    <Link prefetch href="">
                      Careers
                    </Link>
                  </li>
                  <li>
                    <Link prefetch href="">
                      FAQs
                    </Link>
                  </li> */}
                </ul>
              </div>
            </div>
            <div className="col-sm-12 col-md-6 col-lg-3 mt-md-4">
              <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 get 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-start justify-content-lg-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;