import React, { useState, useEffect } from 'react';
import { useGetProd } from '../api';
import './allProducts.css';

const AllProducts = ({ setCart }) => {
    const allProducts = useGetProd();
    const [productState, setProductState] = useState([]);

    // adds "selected" property to each product for checkbox functionality
    useEffect(() => {
        if (allProducts) {
            setProductState(allProducts.map(p => ({
                selected: false,
                ...p
            })));
        }
    }, [allProducts])

    // when checkbox is changed, the corresponding product "selected" value is inversed
    // cart state is filled with products that have TRUE "selected" value
    const onChange = (event) => {
        const {id} = event.target;
        setProductState(productState.map(p => {
            if (p.ID === id) {
                p.selected = !p.selected;
            }
            return p;
        }));
        setCart(productState.filter((p) => {
            return (p.selected === true);
        }));
    }

    let ProductList = () => {
        if (allProducts) {
            return (
                <table>
                    <thead>
                        <tr>
                            <th></th>
                            <th>ID</th>
                            <th>Model #</th>
                            <th>Description</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <tbody>
                        {productState.map(product => {
                            return (
                                <tr key={product.ID}>
                                    <td>
                                        <input
                                            type="checkbox"
                                            id={product.ID}
                                            onChange={onChange}
                                            checked={product.selected}
                                        />
                                    </td>
                                    <td>{product.ID}</td>
                                    <td>{product.productName}</td>
                                    <td>{product.productDesc}</td>
                                    <td>${product.price}</td>
                                </tr>
                            );
                        })

                        }
                    </tbody>
                    <tfoot></tfoot>
                </table>
            );
        } else {
            return (
                <>
                    <p> Loading... </p>
                </>
            )
        }

    };

    return (
        <div className="container">
            <hr />
            <span className="danger">Fetch product list from https://api.oemautomation.com:3001 </span>
            <hr />
            <ProductList />
            <hr />

        </div>
    );
}

export default AllProducts;