bulk-email/src/pages/EvSlotList/index.tsx

import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import CustomTable, { Column } from "../../components/CustomTable";
import { RootState } from "../../redux/reducers";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch } from "../../redux/store/store";
import {
	createSlot,
	updateSlot,
	fetchAvailableSlots,
	deleteSlot,
} from "../../redux/slices/slotSlice";
import EVSlotManagement from "../EVSlotManagement";
import AddSlotModal from "../../components/AddSlotModal";
import dayjs from "dayjs";
// import AddSlotModal from "../../components/AddSlotModal";
// import EditSlotModal from "../../components/EditSlotModal";

export default function EvSlotList() {
	const [addModalOpen, setAddModalOpen] = useState<boolean>(false);
	const [editModalOpen, setEditModalOpen] = useState<boolean>(false);
	const [editRow, setEditRow] = useState<any>(null);
	const { reset } = useForm();

	const [deleteModal, setDeleteModal] = useState<boolean>(false);
	const [viewModal, setViewModal] = useState<boolean>(false);
	const [rowData, setRowData] = useState<any | null>(null);
	const [searchTerm, setSearchTerm] = useState("");
	const dispatch = useDispatch<AppDispatch>();
	const slots = useSelector((state: RootState) => state.slotReducer.slots);

	useEffect(() => {
		dispatch(fetchAvailableSlots(1)); // Fetch slots when component mounts
	}, [dispatch]);

	const handleClickOpen = () => {
		setRowData(null); // Reset row data when opening for new slot
		setAddModalOpen(true);
	};

	const handleCloseModal = () => {
		setAddModalOpen(false);
		setEditModalOpen(false);
		setRowData(null);
		reset();
	};

	const handleAddSlot = async (data: {
		startHour: string;
		endHour: string;
		stationId: number;
		date: string;
	}) => {
		try {
			await dispatch(createSlot(data)); // Create the slot with all necessary fields
			await dispatch(fetchAvailableSlots()); // Refetch updated slots
			handleCloseModal(); // Close modal after successful creation
		} catch (error) {
			console.error("Error adding slot", error);
			toast.error("Failed to add slot");
		}
	};


	// const handleUpdateSlot = async (
	// 	id: number,
	// 	startHour: string,
	// 	endHour: string
	// ) => {
	// 	try {
	// 		await dispatch(updateSlot({ id, startHour, endHour }));
	// 		await dispatch(fetchAvailableSlots());
	// 		handleCloseModal();
	// 	} catch (error) {
	// 		console.error("Update failed", error);
	// 	}
	// };

	// const handleDeleteSlot = async (id: number) => {
	// 	try {
	// 		await dispatch(deleteSlot(id));
	// 		await dispatch(fetchAvailableSlots());
	// 	} catch (error) {
	// 		console.error("Delete failed", error);
	// 	}
	// };

	const slotColumns: Column[] = [
		{ id: "srno", label: "Sr No" },
		{ id: "stationId", label: "Station Id" },
		{ id: "date", label: "Date" },
		{ id: "startHour", label: "Start Hour" },
		{ id: "endHour", label: "End Hour" },
		{ id: "action", label: "Action", align: "center" },
	];

	const filteredSlots = slots?.filter(
		(slot) =>
			dayjs(slot.startTime)
				.format("HH:mm")
				.toLowerCase()
				.includes(searchTerm.toLowerCase()) ||
			dayjs(slot.endTime)
				.format("HH:mm")
				.toLowerCase()
				.includes(searchTerm.toLowerCase())
	);

	const slotRows = filteredSlots?.length
		? filteredSlots.map((slot: any, index: number) => ({
				id: slot?.id,
				srno: index + 1,
				startHour: dayjs(slot?.startTime).format("HH:mm"), // Format startTime
				endHour: dayjs(slot?.endTime).format("HH:mm"), // Format endTime
		  }))
		: [];


	return (
		<>
			<CustomTable
				columns={slotColumns}
				rows={slotRows}
				setDeleteModal={setDeleteModal}
				deleteModal={deleteModal}
				setViewModal={setViewModal}
				viewModal={viewModal}
				setRowData={setRowData}
				setModalOpen={() => setEditModalOpen(true)}
				tableType="slot"
				handleClickOpen={handleClickOpen}
				// handleDelete={handleDeleteSlot} // Allow deleting
			/>
			<AddSlotModal
				open={addModalOpen}
				handleClose={handleCloseModal}
				handleAddSlot={handleAddSlot}
			/>
			{/* <EditSlotModal
				open={editModalOpen}
				handleClose={handleCloseModal}
				handleUpdateSlot={handleUpdateSlot}
				editRow={rowData}
			/> */}
		</>
	);
}