import React, {useState} from "react";
import "./index.css";
function CustomerList(){
    const[customer, setCustomer] = useState("");
    const[customers, setCustomers] = useState([]);
    const handleSubmit = e => {
        e.preventDefault();
        if(customers.length === 0)
            return;
        setCustomers([...customers, 
            {name:customer, count:customer.length}]);
        setCustomer("");
    }
    let rendered = "";
    if(customer.length !== 0){
        rendered = <ul className="styled mt-50" 
                        data-testid="customer-list">
                        {customers && customers.map(cus => {
                         return(
                           <li className="slide-up-fade-in" 
                            data-testid={"list-item"+cus.count}
                            key={"list-item"+cus.count}>
                            {cus.name}
                           </li>
                         )
                        })}
                    </ul>
    }
    return(
        <div className="mt-75 layout-column 
            justify-content-center 
            align-items-center">
            <section className="layout-row 
                align-items-center 
                justify-content-center">
                <input type="text" 
                    className="large" 
                    placeholder="Name" data-testid="app-input" 
                    value={customer} 
                    onChange={e => setCustomer(e.target.value)} />
                <button type="submit" 
                    className="ml-30" 
                    data-testid="submit-button"
                    onClick={handleSubmit}>
                    Add Customer
                </button>
            </section>
            {rendered}
        </div>
    );
}
export default CustomerList