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

export default function ManagerList() {
	const dispatch = useDispatch<AppDispatch>();
	const managers = useSelector(
		(state: RootState) => state.managerReducer.managers
	);

	// Fetch manager list on component mount
	useEffect(() => {
		dispatch(AllmanagerList());
	}, [dispatch]);

	// Columns for the manager table
	const categoryColumns: Column[] = [
		{ id: "srno", label: "Sr No" },
		{ id: "name", label: "Name" },
		{ id: "email", label: "Email" },
		{ id: "phone", label: "Phone" },
		{ id: "stationName", label: "Station Name" },
		{ id: "registeredAddress", label: "Station Location" },
	];

	// Prepare rows for the table
	const categoryRows = managers?.length
		? managers.map((manager, index) => {
				const station = manager?.chargingStation;
				return {
					id: manager.id,
					srno: index + 1,
					name: manager.name,
					email: manager.email,
					phone: manager.phone ?? "NA",
					stationName: station?.name ?? "NA",
					registeredAddress: station?.registeredAddress ?? "NA",
				};
		  })
		: [];

	return (
		<>
			{/* Display manager list */}
			<CustomTable
				columns={categoryColumns}
				rows={categoryRows}
				tableType="all-managers"
			/>
		</>
	);
}
