import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { AiOutlineHeart } from 'react-icons/ai'
import styles from "@/styles/common/small.module.css";
import { useRouter } from 'next/router';
import FavoritesIcon from '../helpers/FavoritesIcon';
import Link from 'next/link';
import { formatNumberWithCommas } from '../commonFunctions/formatNumberWithCommas';
import { useSelector } from 'react-redux';
import { RootState } from '@/Redux/store';
import { userActivity } from '../commonFunctions/userActivity';

const baseUrl = 'https://api.jazzagain.com/public/index.php'

// interface NatureProps {
//     nature:{
//         categoryId:string;
//         subcategoryId:string;
//     }
// }



const CartSimilarProducts: React.FC<any> = ({ cart}) => {

    const router = useRouter();

    const cartProductIds = cart.map((item:any) => item.productId);

    const _loggedIn_user = useSelector((state: RootState) => state.user.user);

    const categories = cart.map((item:any) => ({
        categoryId: item.product.categoryId,
        subCategoryId: item.product.subCategoryId
      }));
    

    const [data,setData] = useState([])

    const getSimilar = async (categoryId:string, subCategoryId:string) => {
        const res = await axios.get(`${baseUrl}/api/getProducts?categoryId=${categoryId}&subCategoryId=${subCategoryId}`);
        // console.log("SIMILAR ", res.data.products.data);

        const otherProducts = res.data.products.data.filter((product:any) => {
            return !cartProductIds.includes(product._id) && product._id != router.query.id;
        });

        return otherProducts;
    };

    useEffect(() => {
        if(cart){
            const fetchData = async () => {
                const allProducts = await Promise.all(categories.map((item:any) => 
                    getSimilar(item.categoryId, item.subCategoryId)
                ));
    
                // Combine products from all categories into one array
                const combinedProducts = [].concat(...allProducts);
                // console.log('expct', combinedProducts);
    
                setData(combinedProducts);
            };
    
            fetchData();
        }
        return () => {};
    }, []);

    if(data.length === 0){
        return null;
    }

    return (
        <>
        <div className="flex justify-between mt-[2rem]">
          <h2 className="text-[#FF332B] text-base">Similar Products</h2>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 justify-center">
                    {data.map((item:any, index:number) => (
                        <div key={index} className="w-[95%] grid mx-auto m-[1rem] cursor-pointer"
                        onClick={()=> {
                        
                            router.push(`/singleproduct/${item._id}`)}
                        }
                        >
                            <div
                                style={{ backgroundImage: `url(https://api.jazzagain.com/public/${item.productFeaturedImage})` }}
                                className={` w-[100%] aspect-[2/1.3] rounded-md bg-cover bg-center bg-no-repeat flex flex-row-reverse`}
                            >
                                <div
                                    className={"w-20 h-9 bg-[#FF332B] text-white flex items-center justify-center ".concat(
                                        styles.borderRounded
                                    )}
                                >
                                    &#8358; {formatNumberWithCommas(item.productSellingPrice)}
                                </div>
                            </div>
                            <div className="flex justify-between items-center">
                                <div className="m-1">
                                    <p>{item.productTitle}</p>
                                    <p className="text-xs text-gray-600">{item.productDiscountPercentage} % Discount</p>
                                </div>
                                <FavoritesIcon itemId={item?._id}/>
                            </div>
                        </div>
                    ))}
        </div>
        </>
    )
}

export default CartSimilarProducts