import React, { useEffect, useState } from "react";
import { Box, Button, TextField, Typography } from "@mui/material";
import CustomTable, { Column } from "../../components/CustomTable";
import { useDispatch, useSelector } from "react-redux";
import { RootState, AppDispatch } from "../../redux/store/store";
import { useForm } from "react-hook-form";
import { addBooking, bookingList } from "../../redux/slices/bookSlice";
import AddBookingModal from "../../components/AddBookingModal";

export default function BookingList() {
	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 bookings = useSelector(
		(state: RootState) => state?.bookReducer.bookings
	);

	const users = useSelector((state: RootState) => state?.profileReducer.user);

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

	const handleClickOpen = () => {
		setRowData(null);
		setAddModalOpen(true);
	};

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

	// Updated handleAddBooking function to handle the added fields
	const handleAddBooking = async (data: {
		stationId: string;
		date: string;
		startTime: string;
		endTime: string;
		carName: string;
		carNumber: string;
		carPort: string;
	}) => {
		try {
			// Dispatch addBooking with new data
			await dispatch(addBooking(data));
			await dispatch(bookingList());
			handleCloseModal(); // Close the modal after adding the booking
		} catch (error) {
			console.error("Error adding booking", error);
		}
	};

	// Table Columns for bookings
	const categoryColumns: Column[] = [
		{ id: "srno", label: "Sr No" },
		{ id: "name", label: "User Name" },
		{ id: "stationId", label: "Station Id" },
		{ id: "stationName", label: "Station Name" },
		{ id: "stationLocation", label: "Station Location" },
		{ id: "date", label: "Date" },
		{ id: "startTime", label: "Start Time" },
		{ id: "endTime", label: "End Time" },
		{ id: "carName", label: "Vehicle Name" },
		{ id: "carNumber", label: "Vehicle Number" },
		{ id: "carPort", label: "Charging Port" },
		{ id: "action", label: "Action", align: "center" },
	];

	// Table Rows for bookings
	// Table Rows for bookings
	const categoryRows = bookings?.length
		? bookings?.map(function (
				booking: {
					id: number;
					stationId: string;
					stationName: string;
					stationLocation: string;
					date: string;
					startTime: string;
					endTime: string;
					carName: string;
					carNumber: string;
					carPort: string;
				},
				index: number
		  ) {
				return {
					id: booking?.id ?? "NA",
					srno: index + 1,
					name: users?.name ?? "NA",
					stationId: booking?.stationId ?? "NA",
					stationName: booking?.stationName ?? "NA",
					stationLocation: booking?.stationLocation ?? "NA",
					date: booking?.date ?? "NA",
					startTime: booking?.startTime ?? "NA",
					endTime: booking?.endTime ?? "NA",
					carName: booking?.carName ?? "NA", // Directly access carName
					carNumber: booking?.carNumber ?? "NA", // Directly access carNumber
					carPort: booking?.carPort ?? "NA",
				};
		  })
		: [];

	return (
		<>
			<CustomTable
				columns={categoryColumns}
				rows={categoryRows}
				setDeleteModal={setDeleteModal}
				deleteModal={deleteModal}
				setViewModal={setViewModal}
				viewModal={viewModal}
				setRowData={setRowData}
				setModalOpen={() => setEditModalOpen(true)}
				tableType="booking"
				handleClickOpen={handleClickOpen}
			/>
			{/* Add Booking Modal */}
			<AddBookingModal
				open={addModalOpen}
				handleClose={handleCloseModal}
				handleAddBooking={handleAddBooking} // Passing the handleAddBooking function
			/>
		</>
	);
}