import React, { useEffect, useState } from "react";
import { TransRoutesService } from "../../services";
import { useDispatch } from "react-redux";
import { transRoutesSlice } from "./../../store";
import moment from 'moment';


const SnackSection = ({transRoutes, snackRecords, sectionName, confirmHasSnack, removeSnackRecord}) => {
	const [customers, setCustomers] = useState([]);
	const dispatch = useDispatch();
	const { fetchAllSnackRecords }  = transRoutesSlice.actions;

	const createSnackForAll = async () => {
		for (const c of customers) {
			await TransRoutesService.createSnackRecords({
				customer_id: c?.customer_id,
				customer_name: c?.customer_name,
				has_snack: true,
				date: moment(new Date()).format('MM/DD/YYYY'),
				create_by: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name,
				create_date: new Date(),
				edit_history: [{
					employee: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name,
					date: new Date()
				}]
			})
		};
		dispatch(fetchAllSnackRecords());
	}

	useEffect(() => {
		const routeCustomers = TransRoutesService.getAllInCenterCustomersFromRoutesForSnack(transRoutes, snackRecords);
		setCustomers(routeCustomers);
	}, [snackRecords, transRoutes]);



	
  
  return (
    <>
      <div className="text-primary mb-4"><h5>{sectionName} {` (${customers?.length})`}</h5></div>
	  {snackRecords?.length <= 0 && (<div className="mb-2 mt-2"><button onClick={() => createSnackForAll()} className="btn btn-primary btn-sm">Confirm All Snack</button></div>)}
      <div className="list row">
        <div className="col-md-12">
					<table className="personnel-info-table">
            <thead>
              <tr>
								<th>Name</th>
								<th>Has Snack Today</th>
								<th>Change Snack Status</th>
							</tr>
						</thead>
						<tbody>
							{
								snackRecords?.length >0 &&  customers?.map((customer) => (
									<tr className={customer?.has_snack ? 'light-green' : 'red'}>
										<td>{customer?.customer_name}</td>
										<td>{customer?.has_snack ? 'Yes': 'No'}</td>
										<td>
											{!customer?.has_snack && <button className="btn btn-link btn-sm" onClick={() => confirmHasSnack(customer)}>Confirm Customer Has snack</button>}
											{customer?.has_snack && <button className="btn btn-link btn-sm" onClick={() => removeSnackRecord(customer?.customer_id)}>Mark Customer NOT have snack</button>}
										</td>
									</tr>
								))
							}
						</tbody>
					</table>
        </div>
      </div>
    </>
    
  );
};

export default SnackSection;