import { useEffect, useState } from "react";
import CustomTable, { Column } from "../../components/CustomTable/customTable";
import { useDispatch, useSelector } from "react-redux";
import { RootState, AppDispatch } from "../../redux/store/store";

import {
	fetchAvailableSlots,
	
} from "../../redux/slices/slotSlice";
import dayjs from "dayjs";

export default function EVSlotList() {
	

	const dispatch = useDispatch<AppDispatch>();
	const availableSlots = useSelector(
		(state: RootState) => state?.slotReducer.availableSlots
	);

	useEffect(() => {
		dispatch(fetchAvailableSlots());
	}, [dispatch]);

	console.log("first", availableSlots);

	const slotColumns: Column[] = [
		{ id: "srno", label: "Sr No" },
		{ id: "name", label: "Station Name" },
		{ id: "stationId", label: "Station Id" },
		{ id: "date", label: "Date" },
		{ id: "startTime", label: "Start Time" },
		{ id: "endTime", label: "End Time" },
		{ id: "isAvailable", label: "Is Available", align: "center" },
		
	];

	const slotRows = availableSlots?.length
		? availableSlots.map((slot, index) => {
				// const formattedDate = dayjs(slot?.date).format("YYYY-MM-DD");
				// 				const startTime = dayjs(
				// 					slot?.startTime,
				// 					"YYYY-MM-DD hh:mm A"
				// 				).isValid()
				// 					? dayjs(slot?.startTime, "YYYY-MM-DD hh:mm A").format(
				// 							"hh:mm A"
				// 					  )
				// 					: "Invalid";
				
				// 				const endTime = dayjs(
				// 					slot?.endTime,
				// 					"YYYY-MM-DD hh:mm A"
				// 				).isValid()
				// 					? dayjs(slot?.endTime, "YYYY-MM-DD hh:mm A").format(
				// 							"hh:mm A"
				// 					  )
				// 					: "Invalid";
				
				return {
					srno: index + 1,
					id: slot?.id ?? "NA",
					stationId: slot?.stationId ?? "NA",
					name: slot?.ChargingStation?.name ?? "NA",
					date: slot?.date ?? "NA",
					startTime: slot?.startTime ?? "NA",
					endTime: slot?.endTime ?? "NA",
					isAvailable: slot?.isAvailable ? "Yes" : "No",
				};
		  })
		: [];

	return (
		<>
			<CustomTable
				columns={slotColumns}
				rows={slotRows}
				tableType="all-available-slots"
			
			/>
			
		</>
	);
}