import Link from "next/link";
import { useCart } from "@/hooks/useCart";
import { formatPrice, getAllProducts } from "@/lib/utils"
import CartItem from "@/components/other/header/cart/index"

export default function Cart() {
    const { 
        cartItems,
        cartCount,
        totalItems,
        loading,
    } = useCart();

    const allProducts    = getAllProducts();
    
    // Lọc sản phẩm có trong giỏ hàng với quantity
    const productsInCart = cartItems
        .map(cartItem => {
            const product = allProducts.find(p => p.id === cartItem.id);
            if (product) {
                return {
                    ...product,
                    cartQuantity: cartItem.cartQuantity,
                };
            }
            return null;
        })
        .filter(item => item !== null);
        
        
    // Tính tổng tiền
    const totalPrice = productsInCart.reduce((sum, item) => {
        if (item && item.price) {
            return sum + (item.price * item.quantity);
        }
        return sum;
    }, 0);

    const hasProducts = cartCount > 0;
    
    
    return (
        <>
            <div className="header-cart-item">
                <Link href="/cart" rel="nofollow" className="flex items-center">
                    <i className="icon-cart relative mr-[10px]">
                        <b className="js-cart-count cart-count">{cartCount}</b>
                    </i>
                    <span className="text"> Giỏ <br />Hàng </span>
                </Link>

                {!loading && hasProducts && 
                    <div className="header-cart-hover">
                        <div className="cart-items-holder">
                            <p className="text-center underline font-600 red border-b" style={{ margin: '0', padding: "10px" }}> 
                                1 số sp thêm từ DEAL sẽ không có trong DB tĩnh  nên không hiển thị
                            </p>

                            {productsInCart.map((item:any) =>
                                <CartItem key={item.id} item={item} />
                            )}
                            
                        </div>

                        <div className="cart-price-hover">
                            <p className="grey m-0 text-right">
                                Tổng tiền hàng
                                (<span className="red"><span className="js-cart-count">{totalItems}</span> sản phẩm</span>):
                                <span className="red text-18 font-600" style={{ verticalAlign: "top" }}> {formatPrice(totalPrice)}đ </span>
                            </p>
                            <Link href="/cart" className="d-block text-center text-white btn-goCart"> THANH TOÁN NGAY </Link>
                        </div>
                    </div>
                }
            </div>
        </>
    )
}