import React from 'react';

const CartProduct = (props) => {

    const groupBy = (arr) => {


        const productsFilter = arr.filter((item) => {
                return item['count'] = '0';
        })

        productsFilter.map((item) => {
            if(item.name === 'Water' || item.name === 'Bread' || item.name === 'Cheese') {
                return item['count']++
            }
        })

        // const map = new Map();

        // list.forEach((item) => {
        //      const key = keyGetter(item);
        //      const collection = map.get(key);
        //      if (!collection) {
        //          map.set(key, [item]);
        //      } else {
        //          collection.push(item);
        //      }
        // });
        // return map;

        return productsFilter;
    }

    const grouped = groupBy(props.products);
    console.log(grouped);

    const getItemInfo = grouped.map((product) => {
        return (
            <>
                <div className="ProductInfo" key={product.id}>
                    <span>{product.name + " | "}</span>
                    <span>{product.discountedPrice ? product.discountedPrice + "$" : product.price + "$"}</span>
                    <span>{' | x' + product.count}</span>
                    <br/>
                </div>
            </>
             )
      })

    // const productInfo = props.products.map((product, index) => {

    //     return (
    //     <>
    //         <div className="ProductInfo" key={product.index}>
    //             <span>{product.name + " | "}</span>
    //             <span>{product.discountedPrice ? product.discountedPrice + "$" : product.price + "$"}</span>
    //             <br/>
    //         </div>
    //     </>
    //      )
    // })

    return (
        <div>
            <span>{getItemInfo}</span>
        </div>
    );
}

export default CartProduct;