import React from 'react'
import Link from 'next/link'
import * as Icon from 'react-feather'
import { useSelector, useDispatch } from 'react-redux'
import { useToasts } from 'react-toast-notifications'
import { useRouter } from 'next/router'
import QtyForm from './QtyForm'

//library yarn
import NumberFormat from 'react-number-format';

const CartContent = function ({ backend, cart_product, ...props }) {
    const router = useRouter()
    const { addToast } = useToasts()
    const dispatch = useDispatch()
    const cart = useSelector((state) => state.cart)
    const total = useSelector((state) => state.total)
    // console.log(cart)

    const removeItem = () => {
        dispatch({
            type: 'REMOVE_ITEM',
            id: pId
        })
        addToast('Cart Removed Successfully', { appearance: 'error' })
    }

    const reset = () => {
        dispatch({
            type: 'RESET'
        })
        addToast('Thanks for your order.', { appearance: 'success' })
        router.push('/')
    }

    return (
        <>
            <div className="cart-table table-responsive">
                <table className="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">Product</th>
                            <th scope="col">Nama Product</th>
                            <th scope="col">Warna Product</th>
                            <th scope="col">Harga Product</th>
                            <th scope="col">Jumlah</th>
                            <th scope="col">Total</th>
                        </tr>
                    </thead>

                    <tbody>
                        {cart_product.length ? cart_product.map(data => (
                            <tr key={data.id}>
                                <td className="product-thumbnail">
                                    <Link href="/product-details">
                                        <a>
                                            <img src={`${backend}${data.product_img["url"]}`} alt="item" />
                                        </a>
                                    </Link>
                                </td>

                                <td className="product-name">
                                    <Link href="/product-details">
                                        <a>{data.product_name}</a>
                                    </Link>
                                </td>

                                <td className="product-name">
                                    <Link href="/product-details">
                                        <a>{data.product_color}</a>
                                    </Link>
                                </td>

                                <td className="product-price">
                                    <span className="unit-amount"><NumberFormat value={data.product_price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span>
                                </td>

                                <td className="product-quantity">
                                    <QtyForm {...data} />
                                </td>

                                <td className="product-subtotal">
                                    <span className="subtotal-amount"><NumberFormat value={(2 * data.product_price).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span>

                                    <a href="#" className="remove" onClick={() => {removeItem(data.id)}}>
                                        <Icon.Trash2 />
                                    </a>
                                </td>
                            </tr>
                        )) : (
                            <tr>
                                <td colSpan="5" className="text-center">Tidak Ada Product di Keranjang</td>
                            </tr>
                        )}
                        
                    </tbody>
                </table>
            </div>

            <div className="cart-buttons">
                <div className="row align-items-center">
                    <div className="col-lg-7 col-md-7 col-sm-7">
                        <div className="continue-shopping-box">
                            <a href="/yamaha/Product/Motor" className="btn btn-light" style={{ color: 'white' }}>Continue Shopping</a>
                        </div>
                    </div>
                </div>
            </div>

            <div className="cart-totals">
                <h3>Cart Totals</h3>

                <ul>
                    <li>Subtotal <span>${total.toFixed(2)}</span></li>
                    <li>Shipping <span>$10.00</span></li>
                    <li>Total <span><b>${(total + 10).toFixed(2)}</b></span></li>
                </ul>
                
                <Link href="/yamaha/Shop/Checkout">
                    {/* <a onClick={e => {
                        e.preventDefault();
                        reset()
                    }} className="btn btn-primary">Proceed to Checkout</a> */}
                    <a className="btn btn-primary">Proceed to Checkout</a>
                </Link>
            </div>
        </>
    )
}

export default CartContent