import style from "./footer.module.css";
import moment from "moment/moment";
import Link from "next/link";
import BottomNavbar from "./bottomNavbar";
import { useWindowSize } from "@/customHook/useWindowSize";
import { useEffect, useState } from "react";
import Image from "next/image";
import {
  EmailOutlined,
  LocationOnOutlined,
  PhoneOutlined,
  PhoneAndroidOutlined,
  FacebookOutlined,
  Instagram,
  YouTube,
  WhatsApp,
} from "@mui/icons-material";
import X from "@mui/icons-material/X";
import { useRouter } from "next/router";
import NextImage from "@/other/NextImage";
import { useSelector } from "react-redux";
import { customerApi } from "@/api/api";
import ReactHtmlParser from "react-html-parser";
import SubscribeInput from "../components/utils/subscribeInput";

const Footer = () => {
  const router = useRouter();
  const { width } = useWindowSize();
  const [mobileButton, setMobileButton] = useState(false);
  const [bottomMenu, setBottomMenu] = useState(true);
  const siteLogo = useSelector((state) => state.generalStore.site_logo);
  const address = useSelector((state) => state.generalStore.address);
  const companyName = useSelector((state) => state.generalStore.company_name);
  const [siteText, setSiteText] = useState({});
  const socialMedia = useSelector((state) => state.generalStore.social_media);

  const footerText = async (ctx) => {
    await Promise.all([
      customerApi.get("/site/contents?group_code=footer_section"),
    ]).then((res) => {
      console.log("res.data, ", res[0].data);
      let newArray = { ...res[0].data.result };
      setSiteText(newArray);
    });
  };

  useEffect(() => {
    if (width <= 768) {
      setMobileButton(true);
      setBottomMenu(false);
    } else {
      setMobileButton(false);
      setBottomMenu(true);
    }
  }, [width]);
  useEffect(() => {
    footerText();
  }, []);
  return (
    <>
      <div className={style.relative_footer}></div>
      <div className={style.footer}>
        <div className="container">
          <div className={style.footer_detail_section}>
            <div className="row">
              <div className={`col-6 col-sm-6 col-md-3`}>
                {/* <div className="secondary_heading"></div> */}
                <div className={style.logo_section}>
                  {siteText &&
                    siteText.footer_text_about &&
                    siteText.footer_text_about.image.length > 0 && (
                      <NextImage
                        src={
                          process.env.NEXT_PUBLIC_UPLOADS +
                          "/" +
                          siteText.footer_text_about._id +
                          "/" +
                          siteText.footer_text_about.image[0]
                        }
                        alt="Logo"
                      />
                    )}
                  {siteText &&
                    siteText.footer_text_about &&
                    siteText.footer_text_about.content.length > 0 &&
                    ReactHtmlParser(siteText.footer_text_about.content[0])}
                </div>
              </div>
              <div className="col-6 col-sm-6 col-md-3 px-2">
                <div className="secondary_heading white-color">
                  Shop With Us
                </div>
                <div className={style.quick_link}>
                  <ul>
                    <li>
                      <a onClick={() => router.push("/account/profile")}>
                        Your Account
                      </a>
                    </li>
                    <li>
                      <a onClick={() => router.push("/account/orders")}>
                        Your Orders
                      </a>
                    </li>
                    <li>
                      <a onClick={() => router.push("/account/address")}>
                        Your Addresses
                      </a>
                    </li>
                    <li>
                      <a onClick={() => router.push("/account/returned")}>
                        Your Returns
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div className="col-6 col-sm-6 col-md-3 px-2">
                <div className="secondary_heading white-color">
                  Let Us Help You
                </div>
                <div className={style.quick_link}>
                  <ul>
                    <li>
                      <a onClick={() => router.push("/become-a-seller")}>
                        Sell On oom.ae
                      </a>
                    </li>
                    <li>
                      <a onClick={() => router.push("/contact-us")}>
                        Contact Us
                      </a>
                    </li>

                    <li>
                      <a onClick={() => router.push("/terms-and-conditions")}>
                        Terms & Conditions
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div className="col-6 col-sm-6 col-md-3 px-2">
                <div className="secondary_heading white-color">
                  Our Policies
                </div>
                <div className={style.quick_link}>
                  <ul>
                    <li>
                      <a onClick={() => router.push("/shipping-policy")}>
                        Shipping Policy
                      </a>
                    </li>
                    <li>
                      <a onClick={() => router.push("/return-policy")}>
                        Return Policy
                      </a>
                    </li>
                    <li>
                      <a onClick={() => router.push("/refund-policy")}>
                        Refund Policy
                      </a>
                    </li>
                    <li>
                      <a onClick={() => router.push("/privacy-policy")}>
                        Privacy Policy
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              {/* {address ? (
                <div className="col-md-3 px-2">
                  <div className={style.division}>
                    <div className="secondary_heading white-color">Address</div>
                    <div className={style.address_section}>
                      <ul>
                        {address && (
                          <li className="capitalize">
                            <span>
                              <LocationOnOutlined />
                            </span>
                            {address &&
                              address.address_1 &&
                              `${address.address_1},`}
                            {address &&
                              address.address_2 &&
                              `${address.address_2}`}
                            {address.landmark && (
                              <>
                                <br />
                                {address.landmark},
                              </>
                            )}
                            {address && (
                              <>
                                <br />
                                {address.state}, {address.country}
                              </>
                            )}
                          </li>
                        )}
                        {address.email && (
                          <li>
                            <span>
                              <EmailOutlined />
                            </span>
                            <a href={`mailto:${address.email}`}>
                              {address.email}
                            </a>
                          </li>
                        )}
                        {address.phone && (
                          <li>
                            <span>
                              <PhoneAndroidOutlined />
                            </span>
                            <a href={`tel:${address.phone}`}>{address.phone}</a>
                          </li>
                        )}
                        {address.tel && (
                          <li>
                            <span>
                              <PhoneOutlined />
                            </span>
                            <a href={`tel:${address.tel}`}>{address.tel}</a>
                          </li>
                        )}
                      </ul>
                    </div>
                  </div>
                </div>
              ) : (
                ""
              )} */}
            </div>
          </div>

          <hr className={style.footer_hr} />
          <div className={`${style.other_info} border_seperator`}>
            {siteText &&
              siteText.accepted_payment_icons &&
              siteText.accepted_payment_icons.image.length > 0 && (
                <div className={style.accepted}>
                  <p className="white-color">
                    {siteText.accepted_payment_icons.title}{" "}
                  </p>
                  <div className={style.accepted_images}>
                    {siteText.accepted_payment_icons.image.map(
                      (item, index) => (
                        <Image
                          key={index}
                          src={
                            item &&
                            process.env.NEXT_PUBLIC_UPLOADS +
                              "/" +
                              siteText.accepted_payment_icons._id +
                              "/" +
                              item
                          }
                          alt="Card Image"
                          fill
                        />
                      )
                    )}
                  </div>
                </div>
              )}
            <SubscribeInput />
            <div className={style.social_network}>
              {socialMedia &&
                (socialMedia.facebook ||
                  socialMedia.instagram ||
                  socialMedia.x ||
                  socialMedia.youtube) && (
                  <>
                    <p>Follow Us </p>
                    <div className={style.social_icon}>
                      {socialMedia.facebook && (
                        <a href={socialMedia.facebook} target="_blank">
                          <FacebookOutlined />
                        </a>
                      )}
                      {socialMedia.instagram && (
                        <a href={socialMedia.instagram} target="_blank">
                          <Instagram />
                        </a>
                      )}
                      {socialMedia.youtube && (
                        <a href={socialMedia.youtube} target="_blank">
                          <YouTube />
                        </a>
                      )}
                      {socialMedia.x && (
                        <a href={socialMedia.x} target="_blank">
                          <X />
                        </a>
                      )}
                      {socialMedia.whatsapp && (
                        <a href={socialMedia.whatsapp} target="_blank">
                          <WhatsApp />
                        </a>
                      )}
                    </div>
                  </>
                )}
            </div>
          </div>
        </div>
        <div className={style.copyright_section}>
          <div className={style.section}>
            Copyright © {moment().format("YYYY")} {companyName}
          </div>
        </div>
      </div>
      {mobileButton && (
        <div className={style.bottom_menu}>
          <BottomNavbar />
        </div>
      )}
    </>
  );
};

export default Footer;
