import './styles.scss'
import ContactsHero from "./CotractsHero";
import ContactForm from '../../components/ContactForm/index';
import ContactsInfo from './ContactsInfo';
import { useSelector, useDispatch } from 'react-redux';
import { fetchContact, selectContact, contactIsLoading } from 'store/slices/ContactsSlice';
import { useEffect, useRef } from 'react';
// import Preloader from 'Layout/Preloader';
import { useAnimation } from 'hooks/useAnimation';



const Contacts = () => {
    const dispatch = useDispatch();
    const container = useRef();


    const isLoading = useSelector(contactIsLoading);
    const contact = useSelector(selectContact);

    useEffect(() => {
        // @ts-ignore
        dispatch(fetchContact());
    }, [dispatch]);

    useAnimation({
        items: ['.contacts-info', '.contacts-form-section .contact-form'],
        container,
        dependencies: [isLoading],
    })

    if (!contact) {
        return null;
    }



    const {
        title,
        description,
        support_title,
        support_email,
        support_discord_text,
        support_discord_link,
        office_title,
        office_address,
        social_title,
        social_instagram,
        social_x,
        social_facebook,
        // createdAt,
        // updatedAt,
        // publishedAt,
    } = contact;

    return !isLoading && (
        <>
            {/* {
                isLoading && <Preloader />
            } */}
            <ContactsHero page={"Contacts"} title={title} desc={description} />
            <section ref={container} className="inner-container contacts-form-section">
                <ContactsInfo
                    support_title={support_title}
                    support_email={support_email}
                    support_discord_text={support_discord_text}
                    support_discord_link={support_discord_link}
                    office_title={office_title}
                    office_address={office_address}
                    social_title={social_title}
                    social_instagram={social_instagram}
                    social_x={social_x}
                    social_facebook={social_facebook}
                />
                <ContactForm />
            </section>
        </>
    );
}

export default Contacts;

• [D] ContactsInfo
• [D] CotractsHero
• [F] index.jsx
  Delete
• [F] mockData.js
  Delete
• [F] styles.scss
  Delete