import { NavLink, useLocation } from "react-router-dom"
import { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import ContactStick from "./pages/ContactStick";
import {    faTiktok, faXTwitter, faFacebookF,    faYoutube,    faPinterestP,    faInstagram} from '@fortawesome/free-brands-svg-icons';
interface Properties {
        facebook: string;
        twitter: string;
        instagram: string;
        youtube: string;
        tiktok: string;
        pintrest: string;
        about: string;
        address: string;
        phone: string;
        email: string;
        copy: string;
        whatsapp: string;
        whatsappMessage: string;
    }

interface FooterProps {
    LOGO: string;
    apiUrl: string;
}
const Footer = ({ LOGO, apiUrl }: FooterProps) => {
    const [properties, setProperties] = useState<Properties | null>(null);
    const [loading, setLoading] = useState(true);

    const location = useLocation();

    const PROJECT_NAME = import.meta.env.VITE_PROJECT_NAME;
    const CONTACT_PHONE = import.meta.env.VITE_CONTACT_PHONE;  
    useEffect(() => {
        const fetchProperties = async () => {
            try {
                const response = await fetch(apiUrl);
                const data = await response.json();
                setProperties(data); // Assuming the data is in the expected format
                setLoading(false);
            } catch (error) {
                console.error("Error fetching properties:", error);
                setLoading(false);
            }
        };

        fetchProperties();
    }, [apiUrl]);
    if (loading || !properties) return null;
    return (
        <section className="footer_one" id="footer1">
            <div className="container">
                <div className="row">
                    <div className="col-sm-6 col-md-6 col-lg-4 col-xl-6 pr0 pl0">
                        <div className="footer_about_widget center-t">
                            <a href="/" title="">
                                <img
                                    src={LOGO}
                                    alt=""
                                    data-lazy-src="images/logo.svg"
                                    data-ll-status="loaded"
                                    className="entered lazyloaded"
                                />
                            </a>
                        </div>
                    </div>
                    <div className="col-sm-6 col-md-6 col-lg-8 col-xl-6 pr0 pl0">
                        <div className="footer_about_widget">
                            <div className="rh_footer__social">
                                {properties.youtube && (
                                    <a href={properties.youtube} target="_blank" rel="nofollow">
                                        <FontAwesomeIcon icon={faYoutube} size="2x" />
                                    </a>
                                )}
                                {properties.facebook && (
                                    <a href={properties.facebook} target="_blank" rel="nofollow">
                                        <FontAwesomeIcon icon={faFacebookF} size="2x" />
                                    </a>
                                )}
                                {properties.instagram && (
                                    <a href={properties.instagram} target="_blank" rel="nofollow">
                                        <FontAwesomeIcon icon={faInstagram} size="2x" />
                                    </a>
                                )}
                                
                                
                                {properties.pintrest && (
                                    <a href={properties.pintrest} target="_blank" rel="nofollow">
                                        <FontAwesomeIcon icon={faPinterestP} size="2x" />
                                    </a>
                                )}
                                {properties.pintrest && (
                                    <a href={properties.pintrest} target="_blank" rel="nofollow">
                                        <FontAwesomeIcon icon={faXTwitter} size="2x" />
                                    </a>
                                )}
                                {properties.tiktok && (
                                    <a href={properties.tiktok} target="_blank" rel="nofollow">
                                        <FontAwesomeIcon icon={faTiktok} size="2x" />
                                    </a>
                                )}
                                <a href={`https://wa.me/${CONTACT_PHONE}?text=Hello`}
                                    target="_blank" rel="nofollow">
                                    <i className="fa fa-whatsapp fa-2x"></i>
                                </a>

                            </div>
                        </div>
                    </div>
                    <div className="clearfix"></div>
                    <div className="col-sm-6 col-md-6 col-lg-5 col-xl-5 pr0 pl0">
                        <div className="footer_about_widget">
                            <h4>About {PROJECT_NAME}</h4>
                            
                                {properties.about && (
                                <p>{properties.about}</p>
                                )} 
                         </div>
                    </div>
                    <div className="col-sm-6 col-md-6 col-lg-5 col-xl-3">
                        {!['/es', '/en', '/ru', '/fr'].some((prefix) => location.pathname === prefix || location.pathname.startsWith(`${prefix}/`)) && (
                            <>
                                <div className="footer_qlink_widget">
                                    <h4>Quick Links</h4>
                                    <ul className="list-unstyled">
                                        <div className="row mobile-fot-row1">
                                            <div className="col-sm-6 mobile-fot-c1">
                                                <li><NavLink to="for-sale?listingType=residential&propertyType=townhouse" >Townhouse</NavLink></li>
                                                <li><NavLink to="/for-sale?listingType=residential&propertyType=apartment" >Apartments</NavLink></li>
                                                <li><NavLink to="/for-sale?listingType=residential&propertyType=villa" >Villas</NavLink></li>
                                                <li><NavLink to="/for-sale?listingType=residential&propertyType=land" >Land</NavLink></li>
                                                <li><NavLink to="/for-sale?listingType=commercial" >Commercial</NavLink></li>
                                                <li><NavLink to="/offplan-properties-for-sale" >Off-Plan</NavLink></li>
                                                <li><NavLink to="/area-guides" >Communities</NavLink></li>
                                            </div>
                                            <div className="col-sm-6 mobile-fot-c2">
                                                <li><NavLink to="/article/about-us" >About Us</NavLink></li>
                                                <li><NavLink to="/for-sale" >Buy</NavLink></li>
                                                <li><NavLink to="/for-rent" >Rent</NavLink></li>
                                                <li><NavLink to="/career" >Careers</NavLink></li>
                                                <li><NavLink to="/articles/news-media" >Our Blog</NavLink></li>
                                            
                                            </div>
                                        </div>
                                    </ul>
                                </div>
                            </>
                        )}
                    </div>
                    <div className="col-sm-6 col-md-6 col-lg-2 col-xl-4">
                        <div className="footer_contact_widget">
                            <h4>Contact Us</h4>
                            <ul className="list-unstyled">
                                {properties.address && (
                                    <li className="">{properties.address}</li>
                                )}  
                            </ul>
                            <ul className="list-unstyled bottom-list">
                                 
                                {properties.email && (
                                    <li className=""><a href={`mailto:${properties.email}`} >{properties.email}</a></li>

                                )} 
                                {properties.phone && (
                                    <li className=""><a href={`tel:${properties.phone}`} >{properties.phone}</a></li>

                                )} 
                            </ul>
                        </div>
                    </div>
                    <div className="col-sm-12 col-md-12 col-lg-12 col-xl-12 pr0 pl0">
                        <div className="footer_about_widget copyright d-flex">
                             
                            {properties.copy && (
                                <p className="col-sm-6">{properties.copy}</p>

                            )} 
                            
                            <div className="col-sm-6 pull-right text-right design-text">
                                <div className="row">
                                    <div className="col-sm-6">

                                    </div>
                                    <div className="col-sm-6"> Design by <a href="http://www.redspider.ae/" target="_blank"><img src="/img/redpider.svg" alt="redspider.ae" style={{ width: '33px', margin: '0px' }} /></a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <ContactStick phone={properties.whatsapp} email={properties.email} whatsappMessage={properties.whatsappMessage} />
        </section>
    );
};

export default Footer;