import React, { useCallback, useEffect, useState } from 'react';
import './styles.scss';
import HeroComponent from './heroComponent';
import HeroLayout from 'components/Sections/Hero/HeroLayout';
import { useSelector } from 'react-redux';
import { selectProductHero, selectProductIsLoading } from 'store/slices/ProductSlice';
import { getImageUrl } from 'helpers';
import DaraProxyIllustration from 'components/AnimationIllustrations/DataProxyIllustration';
import StaticResidentialProxiesIllustration from 'components/AnimationIllustrations/StaticResidentialProxiesIllustration';
import { useParams } from 'react-router-dom';
import ResidentialProxyIllustration from 'components/AnimationIllustrations/ResidentialProxyIllustration';
import { Helmet } from 'react-helmet';
import { selectDatacenterProxies, selectResidentialProxies, selectStaticResidentialProxies } from 'store/slices/PricingSlice';
import { convertToCent, getPriceTierAmount } from 'components/Sections/ProductPricing/helpers';
import useMediaQuery from '../../../hooks/useMediaQuery';

const Hero = () => {
    const [sku, setSku] = useState(null);
    const [price, setPrice] = useState(null);

    const isLoading = useSelector(selectProductIsLoading);
    const hero = useSelector(selectProductHero);
    const datacenterProxies = useSelector(selectDatacenterProxies);
    const staticResidentialProxies = useSelector(selectStaticResidentialProxies);
    const residentialProxies = useSelector(selectResidentialProxies);
    const datacenterProxiesUnit = datacenterProxies.product_prices?.[2]?.price_tiers;
    const staticResidentialProxiesUnit = staticResidentialProxies.product_prices?.[2]?.price_tiers;
    const residentialProxiesUnit = residentialProxies.product_prices?.[0]?.price_tiers;
    const { productSlug } = useParams();
    const [illustrationComponent, setIllustrationComponent] = useState(null);
    const { title, description, button_text, button_two_text, button_text_link, button_two_text_link, image } = hero;
    const imageUrl = getImageUrl(image);

    const getIllustrationComponent = useCallback(() => {
        switch (productSlug) {
            case "datacenter-proxies":
                setSku("datacenter");
                if (datacenterProxiesUnit) setPrice(convertToCent(getPriceTierAmount(0, datacenterProxiesUnit)))
                return <DaraProxyIllustration isLoading={isLoading} />;
            case "static-residential-proxies":
                setSku("isp");
                if (staticResidentialProxiesUnit) setPrice(convertToCent(getPriceTierAmount(0, staticResidentialProxiesUnit)))
                return <StaticResidentialProxiesIllustration isLoading={isLoading} />;
            case "residential-proxy":
                setSku("residential");
                if (residentialProxiesUnit) setPrice(convertToCent(getPriceTierAmount(0, residentialProxiesUnit)))
                return <ResidentialProxyIllustration isLoading={isLoading} />;
            default:
                return <img src={imageUrl} alt="" />;
        }
    }, [productSlug, isLoading, datacenterProxiesUnit, staticResidentialProxiesUnit, residentialProxiesUnit, imageUrl]);

    const isMobile = useMediaQuery("max-width: 640px ")

    useEffect(() => {
        const illustrationComponent = getIllustrationComponent();
        setIllustrationComponent(illustrationComponent);
    }, [imageUrl, productSlug, isLoading, getIllustrationComponent]);

    return (
        <>
            <Helmet
                title={title}
                meta={[
                    { name: "description", content: description },
                ]}
                script={[
                    {
                        type: "application/ld+json",
                        innerHTML: JSON.stringify({
                            "@context": "http://schema.org",
                            "@type": "Product",
                            "name": title,
                            "image": `https://ping-proxies-dev.onrender.com/uploads/${imageUrl}`,
                            "description": description,
                            "sku": sku,
                            "brand": {
                                "@type": "Brand",
                                "name": "Ping Proxies"
                            },
                            "offers": {
                                "@type": "Offer",
                                "priceCurrency": "USD",
                                "price": price,
                                "availability": "http://schema.org/InStock",
                                "url": `https://site-ping-proxies.goodface.com.ua/products/${productSlug}`
                            },
                            "aggregateRating": {
                                "@type": "AggregateRating",
                                "ratingValue": "4.8",
                                "reviewCount": "84"
                            }
                        })
                    },
                ]}
            />
            <HeroLayout image={isMobile ? <img src={imageUrl} alt="" /> : illustrationComponent} isLoading={isLoading}>
                <HeroComponent
                    title={title}
                    desc={description}
                    button_text={button_text}
                    button_two_text={button_two_text}
                    hasCrumbs={true}
                    button_text_link={button_text_link}
                    button_two_text_link={button_two_text_link}
                />
            </HeroLayout>
        </>

    );
}

export default Hero;

• [F] heroComponent.jsx
  Delete
• [F] index.jsx
  Delete
• [F] styles.scss
  Delete