import axios from "axios";
import Head from "next/head";
import React from "react";
import ContactForm from "@/components/contact-us/contactForm";
import { customerApi } from "@/api/api";
import style from "./contact-us.module.css";
import {
  EmailOutlined,
  FacebookOutlined,
  Instagram,
  LocationOnOutlined,
  PhoneAndroidOutlined,
  PhoneOutlined,
  WhatsApp,
  YouTube,
} from "@mui/icons-material";
import X from "@mui/icons-material/X";
import { useSelector } from "react-redux";
import ReactHtmlParser from "react-html-parser";
import FadeInContainer from "@/components/utils/animation/fadeInContainer";

const ContactUs = ({ metaData, siteText }) => {
  const socialMedia = useSelector((state) => state.generalStore.social_media);
  const address = useSelector((state) => state.generalStore.address);
  return (
    <React.Fragment>
      <Head>
        <title>
          {metaData.meta_title
            ? metaData.meta_title
            : "Contact Us - " + process.env.NEXT_PUBLIC_COMPANY_NAME}
        </title>
        <meta charset="UTF-8" />
        <meta name="description" content={metaData.meta_description} />
        <meta
          name="keywords"
          content={
            metaData.meta_keywords && metaData.meta_keywords.length > 0
              ? metaData.meta_keywords.join(",")
              : ""
          }
        />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>

      <div className={`${style.contact_section}`}>
        <FadeInContainer loadVisibile={true} delay={500}>
          <div className="container">
            <h1>Get In Touch</h1>
            <p>Please feel free to contact us on the details below.</p>
            <div className={style.form_section}>
              <div className={style.form_flex}>
                <ContactForm />

                <div className={style.contact_info_section}>
                  <div className={`secondary_heading ${style.heading}`}>
                    Contact Information
                  </div>
                  <div className={style.address_section}>
                    <ul>
                      {address && (
                        <>
                          {address.address_1 && (
                            <li className="capitalize">
                              <span>
                                <LocationOnOutlined />
                              </span>
                              {address &&
                                `${address.address_1}, ${address.address_2},`}
                              <br />
                              {address.landmark && `${address.landmark},`}
                              <br />
                              {address &&
                                `${address.state}, ${address.country}`}
                            </li>
                          )}
                          {address.email && (
                            <li>
                              <span>
                                <EmailOutlined />
                              </span>
                              <a href={`emailto:${address.email}`}>
                                {address.email}
                              </a>
                            </li>
                          )}
                          {address.phone && (
                            <li className="capitalize">
                              <span>
                                <PhoneAndroidOutlined />
                              </span>

                              <a href={`tel:${address.phone}`}>
                                {address.phone}
                              </a>
                            </li>
                          )}
                          {address.tel && (
                            <li className="capitalize">
                              <span>
                                <PhoneAndroidOutlined />
                              </span>
                              <a href={`tel:${address.tel}`}>{address.tel}</a>
                            </li>
                          )}
                        </>
                      )}
                      {/* {siteText.contact &&
                        siteText.contact.content.length > 0 &&
                        siteText.contact.content[0] &&
                        siteText.contact.content[0].includes("address[") && (
                          <li>
                            <span>
                              <LocationOnOutlined />
                            </span>
                            {
                              siteText.contact.content[0]
                                .split("address[")[1]
                                .split("]")[0]
                            }
                          </li>
                        )}
                      {siteText.contact &&
                        siteText.contact.content.length > 0 &&
                        siteText.contact.content[0] &&
                        siteText.contact.content[0].includes("email[") && (
                          <li>
                            <span>
                              <EmailOutlined />
                            </span>
                            {
                              siteText.contact.content[0]
                                .split("email[")[1]
                                .split("]")[0]
                            }
                          </li>
                        )}
                      {siteText.contact &&
                        siteText.contact.content.length > 0 &&
                        siteText.contact.content[0] &&
                        siteText.contact.content[0].includes("phone1[") && (
                          <li>
                            <span>
                              <PhoneAndroidOutlined />
                            </span>
                            {
                              siteText.contact.content[0]
                                .split("phone1[")[1]
                                .split("]")[0]
                            }
                          </li>
                        )}
                      {siteText.contact &&
                        siteText.contact.content.length > 0 &&
                        siteText.contact.content[0] &&
                        siteText.contact.content[0].includes("phone2[") && (
                          <li>
                            <span>
                              <PhoneAndroidOutlined />
                            </span>
                            {
                              siteText.contact.content[0]
                                .split("phone2[")[1]
                                .split("]")[0]
                            }
                          </li>
                        )} */}
                    </ul>
                    <div className={style.social_network}>
                      {Object.keys(socialMedia).length > 0 &&
                        (socialMedia.facebook ||
                          socialMedia.instagram ||
                          socialMedia.x ||
                          socialMedia.youtube ||
                          socialMedia.whatsapp) && (
                          <>
                            <div className={style.social_icon}>
                              {socialMedia.facebook && (
                                <a href={socialMedia.facebook}>
                                  <FacebookOutlined />
                                </a>
                              )}
                              {socialMedia.instagram && (
                                <a href={socialMedia.instagram}>
                                  <Instagram />
                                </a>
                              )}
                              {socialMedia.x && (
                                <a href={socialMedia.x}>
                                  <X />
                                </a>
                              )}
                              {socialMedia.youtube && (
                                <a href={socialMedia.youtube}>
                                  <YouTube />
                                </a>
                              )}
                              {socialMedia.whatsapp && (
                                <a href={socialMedia.whatsapp}>
                                  <WhatsApp />
                                </a>
                              )}
                            </div>
                          </>
                        )}
                    </div>
                  </div>
                </div>
              </div>
              <div>
                {address && address.embed_map && (
                  <div className={style.embed_map}>
                    {ReactHtmlParser(address.embed_map)}
                  </div>
                )}
              </div>
            </div>
          </div>
        </FadeInContainer>
      </div>
    </React.Fragment>
  );
};

export default ContactUs;

export const getStaticProps = async (ctx) => {
  let metaData = {};
  let siteText = {};
  await Promise.all([
    customerApi.get("/site/meta?path=/contact-us"),
    customerApi.get("/site/contents?group_code=contact_section"),
  ])
    .then((res) => {
      if (res[0] && res[0].data) metaData = res[0].data.data;
      let newArray = { ...res[1].data.result };
      siteText = newArray;
    })
    .catch((err) => {
      console.log("err:", err);
    });
  return {
    props: {
      metaData: metaData,
      siteText: siteText,
    },
    revalidate: 600,
  };
};
