"use client";
import { Container, Row, Col, Nav, NavLink } from "react-bootstrap";
import "./Footer.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faFacebookF,
  faGoogle,
  faLinkedinIn,
  faTwitter,
} from "@fortawesome/free-brands-svg-icons";
import { useDispatch, useSelector } from "react-redux";
import {
  appSetup,
  getAllCategories,
  SocialLink,
} from "../../features/master/masterSlice";
import { useEffect } from "react";
import { getGroupByProduct } from "../../features/products/productsSlice";
import { usePathname, useRouter } from "next/navigation";
import Link from "next/link";

const Footer = () => {
  const navigate = useRouter();

  const scrollToSection = (id) => {
    // first navigate to Categories page
    dispatch(getGroupByProduct({ p_category_id: id }));
    // Wait a bit to let the Categories component mount
    setTimeout(() => {
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: "smooth", block: "start" });
      }
    }, 100); // tweak delay if needed
    navigate.push(`/categories?category_id=${id}`, {
      state: { scrollToId: id },
    });
    // navigate(`/categories?category_id=${id}`);
  };

  const category = useSelector((state) => state.master.categories);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getAllCategories());
  }, [dispatch]);

  const sociallink = useSelector((state) => state?.master?.social_link);

  useEffect(() => {
    dispatch(SocialLink());
  }, [dispatch]);

  const isSignin = useSelector((state) => state.auth.is_signin);

  const app_setup = useSelector((state) => state.master.app_setup);

  const pathname = usePathname();

  return (
    <>
      <section className="Footer">
        <div className="container">
          <div className="row custom_row ">
            <div className="col-12">
              <div className="fisrt_col">
                <div className="logo_holder">
                  <img
                    // src={process.env.NEXT_PUBLIC_IMG_URL + app_setup?.logo}
                    src={"/assets/images/logo/A-Marts.png"}
                    className="logo_img"
                  />
                </div>
              </div>
            </div>

            <div className="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-6">
              <div className="col_div">
                <p className="footer_section_title">Quick Links</p>

                <Nav>
                  <div className="first_nav_div">
                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/"
                        className={pathname === "/" ? "active" : ""}
                      >
                        Home
                      </NavLink>
                    </Nav.Item>

                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/shop"
                        className={pathname === "/shop" ? "active" : ""}
                      >
                        Categories
                      </NavLink>
                    </Nav.Item>

                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/about-us"
                        className={pathname === "/about-us" ? "active" : ""}
                      >
                        About Us
                      </NavLink>
                    </Nav.Item>

                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/blog"
                        className={pathname === "/blog" ? "active" : ""}
                      >
                        Blog
                      </NavLink>
                    </Nav.Item>

                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/contact-us"
                        className={pathname === "/contact-us" ? "active" : ""}
                      >
                        Contact Us
                      </NavLink>
                    </Nav.Item>
                  </div>

                  <div className="first_nav_div">
                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/terms-conditions"
                        className={
                          pathname === "/terms-conditions" ? "active" : ""
                        }
                      >
                        Terms & Conditions
                      </NavLink>
                    </Nav.Item>
                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/privacy-policy"
                        className={
                          pathname === "/privacy-policy" ? "active" : ""
                        }
                      >
                        Privacy Policy
                      </NavLink>
                    </Nav.Item>
                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/account"
                        className={pathname === "/account" ? "active" : ""}
                      >
                        Your Account
                      </NavLink>
                    </Nav.Item>
                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/wishlist"
                        className={pathname === "/wishlist" ? "active" : ""}
                      >
                        Your Wishlist
                      </NavLink>
                    </Nav.Item>
                    <Nav.Item>
                      <NavLink as={Link} href="/faqs">
                        FAQs
                      </NavLink>
                    </Nav.Item>
                  </div>
                </Nav>
              </div>
            </div>

            <div className="col-xxl-4 col-xl-3 col-lg-3 col-md-4 col-sm-6">
              <div className="col_div">
                <div className="footer_info_div">
                  <p className="footer_section_title">Customer Support</p>
                  <p className="info_text">
                    <span className="bold_text">Phone:</span>{" "}
                    {app_setup?.contact_no}
                  </p>
                  <p className="info_text">
                    <span className="bold_text">Email:</span> {app_setup?.email}
                  </p>
                </div>

                <div className="footer_info_div">
                  <p className="footer_section_title">
                    Phone for Corporate Queries{" "}
                  </p>
                  <p className="info_text">
                    Phone: {app_setup?.alt_contact_no}
                  </p>
                </div>

                <div className="footer_info_div">
                  <p className="footer_section_title">Address</p>
                  <p className="info_text">{app_setup?.address}</p>
                </div>
              </div>
            </div>

            <div className="col-xxl-2 col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
              <div className="col_div">
                <p className="footer_section_title">Social Links</p>

                <div className="icons_holder">
                  {sociallink?.map((item, index) => (
                    <div className="icon_div" key={index}>
                      <a
                        key={index}
                        href={item?.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="img_holder"
                      >
                        <img
                          src={process.env.NEXT_PUBLIC_IMG_URL + item?.image}
                          className="icon_class"
                        />
                      </a>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="col-xxl-2 col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
              <div className="col_div">
                {/* <p className="footer_section_title">App Link</p> */}

                {/* <div className="images_holder">
                    <img src={"/assets/images/footer/img1.png"} className="download_img"/>
                    <img src={"/assets/images/footer/img2.png"} className="download_img"/>
                </div> */}
              </div>
            </div>
          </div>

          <div className="footer_text_div">
            <p className="footer_text">
              ©{new Date().getFullYear()} A-Mart All Rights Reserved | Developed
              by{" "}
              <Link href={"https://profcymaglobal.com/"} target="_blank">
                Profcyma Solutions Pvt Ltd
              </Link>
            </p>
          </div>
        </div>

        {/* <div className="right_side_logo">
          <img src={"/assets/images/footer/bglogo.png"} className="inner_img"/>
        </div> */}
      </section>
    </>
  );
};

export default Footer;
