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 ManagerList() {
	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();
	};

	const handleAddBooking = async (data: {
		stationId: string;
		date: string;
		startTime: string;
		endTime: string;
	}) => {
		try {
			await dispatch(addBooking(data));
			await dispatch(bookingList());

			handleCloseModal(); // Close the modal
		} catch (error) {
			console.error("Error adding manager", error);
		}
	};

	const categoryColumns: Column[] = [
		{ id: "srno", label: "Sr No" },
		{ id: "name", label: "User Name" },
		// { id: "stationName", label: "Station Name" },
		// { id: "registeredAddress", label: "Station Location" },
		{ id: "stationId", label: "Station Id" },

		{ id: "date", label: "Date" },
		{ id: "startTime", label: "Start Time" },
		{ id: "endTime", label: "End Time" },
		{ id: "action", label: "Action", align: "center" },
	];

	const categoryRows = bookings?.length
		? bookings?.map(function (
				booking: {
					id: number;
					name: string;
					stationId: string;
					date: string;
					startTime: string;
					endTime: string;
				},
				index: number
		  ) {
				return {
					id: booking?.id ?? "NA",
					srno: index + 1,
					name: users?.name ?? "NA",
					stationId: booking?.stationId ?? "NA",
					date: booking?.date ?? "NA",
					startTime: booking?.startTime ?? "NA",
					endTime: booking?.endTime ?? "NA",
				};
		  })
		: [];
	// console.log("Rowa", categoryRows);

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