import React, { useEffect, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import { ReactComponent as AgreeCheck } from 'assets/icons/AgreeCheck.svg';
import './styles.scss';
import { getImageUrl } from 'helpers';
import { selectIsHeaderBannerClosed } from 'store/slices/UI-Slice';
import useMediaQuery from 'hooks/useMediaQuery';
import { ReactComponent as Plus } from 'assets/icons/button/plus.svg';
import { selectProductTable } from 'store/slices/GeneralSlice';
import { Link } from 'react-router-dom';


const PricingTable = () => {
    const content = useRef(null);
    const isTablet = useMediaQuery('max-width:1024px');
    const isBannerClosed = useSelector(selectIsHeaderBannerClosed);
    const compareProducts = useSelector(selectProductTable);
    const {
        best_for_text,
        quantity_discounts_text,
        customizable_bandwidth_text,
        pricing_ip_text,
        pricing_gb_text,
        city_targeting_text,
        country_targeting_text,
        unlimited_threads_text,
        unlimited_bandwidth_text,
        ip_rotation_text,
        static_ip_address_text,
        full_proxy_management_text,
        api_access_text,
        compare_product
    } = compareProducts;

    const info = [
        { key: ['best_for'], label: best_for_text },
        { key: ['quantity_discounts_text', 'quantity_discounts'], label: quantity_discounts_text },
        { key: ['quantity_discounts_text', 'customizable_bandwidth'], label: customizable_bandwidth_text },
        { key: ['pricing_ip_text', 'pricing_ip'], label: pricing_ip_text },
        { key: ['pricing_gb_text', 'pricing_gb'], label: pricing_gb_text },
        { key: ['country_targeting_text', 'country_targeting'], label: country_targeting_text },
        { key: ['city_targeting_text', 'city_targeting'], label: city_targeting_text },
        { key: ['unlimited_threads_text', 'unlimited_threads'], label: unlimited_threads_text },
        { key: ['unlimited_bandwidth_text', 'unlimited_bandwidth'], label: unlimited_bandwidth_text },
        { key: ['ip_rotation_text', 'ip_rotation'], label: ip_rotation_text },
        { key: ['static_ip_address_text', 'static_ip_address'], label: static_ip_address_text },
        { key: ['full_proxy_management_text', 'full_proxy_management'], label: full_proxy_management_text },
        { key: ['api_access_text', 'api_access'], label: api_access_text }
    ];


    const [activeAccordions, setActiveAccordions] = useState({});
    const handleAccordionToggle = (productId) => {
        setActiveAccordions((prevAccordions) => ({
            ...prevAccordions,
            [productId]: !prevAccordions[productId]
        }));
    };


    const renderProductInfo = (product, infoItem) => {
        for (let key of infoItem.key) {
            const value = product[key];
            if (value !== null && value !== undefined) {
                if (typeof value === 'boolean') {
                    return value ? <AgreeCheck /> : <span>-</span>;
                } else {
                    return <span>{value}</span>;
                }
            }
        }
        return '-';
    };
    useEffect(() => {
        if (compareProducts.compare_product && compareProducts.compare_product.length > 0 && isTablet) {
            setActiveAccordions({ [compareProducts.compare_product[0].id]: true });
        }
    }, [compareProducts.compare_product, compareProducts.compare_product.length, isTablet]);
    return isTablet ? (
        <div className="compare-products-accordion">
            {compareProducts.compare_product?.map(product => (
                <div key={product.id} className="compare-products-accordion__item">
                    <div className={`compare-products-accordion__header  ${activeAccordions[product.id] ? 'active' : ''}`} onClick={() => handleAccordionToggle(product.id)}>
                        <div className='compare-products-accordion__header-body'>
                            <img src={getImageUrl(product.icon)} alt={product.name} className="compare-products-accordion__header-icon" />
                            <div className="accordion__product-name">{product.name}</div>
                        </div>
                        <div className='compare-products-accordion__header-cross'><Plus /></div>
                    </div>
                    <div ref={content} style={{ maxHeight: activeAccordions[product.id] ? `${content.current ? content.current.scrollHeight : 0}px` : "0px" }} className={`compare-products-accordion__content ${activeAccordions[product.id] ? 'active' : ''}`}>
                        {info.map((infoItem, index) => (
                            <div key={index} className="compare-products-accordion__content-row">
                                <div className="info-label">{infoItem.label}</div>
                                <div className="info-value">{renderProductInfo(product, infoItem)}</div>
                            </div>
                        ))}
                    </div>
                </div>
            ))}
        </div>

    ) : (
        <div className={`compare-products-table`}>
            <div className={`compare-products-table__header-row  ${isBannerClosed ? '' : 'compare-products-table__header-row--with-banner'}`}>
                <div className='compare-products-table__header-row-container'>
                    <div></div>
                    {compare_product?.map(product => (
                        <Link to={product.link} aria-label={product.name} key={product.id}>
                            <img src={getImageUrl(product.icon)} alt={product.icon.data.attributes.alternativeText} className="compare-products-table__product-icon" />
                            {product.name}
                        </Link>
                    ))}
                </div>

            </div>

            {info.map((infoItem, index) => (
                <div key={index} className="compare-products-table__product-row">
                    <div className="compare-products-table__info-column">{infoItem.label}</div>
                    {compare_product?.map(product => (
                        <div key={product.id}>
                            {renderProductInfo(product, infoItem)}
                        </div>
                    ))}
                </div>
            ))}
        </div>
    );
};

export default PricingTable;

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