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) => {
  if (!categoryId || !subCategoryId) return [];

  try {
    const res = await axios.get(
      `${baseUrl}/api/getProducts?categoryId=${categoryId}&subCategoryId=${subCategoryId}`
    );

    const currentId = Array.isArray(router.query.id)
      ? router.query.id[0]
      : router.query.id;

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

    return otherProducts;
  } catch (error) {
    console.error("Similar products error:", error);
    return [];
  }
};

    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