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

import React, { useEffect, useState } from "react";
import { Box, Button, TextField, Typography } from "@mui/material";
import AddEditCategoryModal from "../../components/AddEditCategoryModal";
import { useForm } from "react-hook-form";
import CustomTable, { Column } from "../../components/CustomTable";
import DeleteModal from "../../components/Modals/DeleteModal";
import { RootState } from "../../redux/reducers";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch } from "../../redux/store/store";
import {
	addVehicle,
	updateVehicle,
	vehicleList,
} from "../../redux/slices/VehicleSlice";
import SearchIcon from "@mui/icons-material/Search";
const categoryRows = [
	{
		srno: 1,
		id: 1, // Using a number for 'id'
		name: "Tesla Model S",
		brand: "Tesla",
		imageUrl:
			"https://example.com/https://imgd-ct.aeplcdn.com/1056x660/n/cw/ec/93821/model-s-exterior-front-view.jpeg?q=80.jpg",
	},
	{
		srno: 2,
		id: 2,
		name: "BMW X5",
		brand: "BMW",
		imageUrl: "https://example.com/bmw_x5.jpg",
	},
	{
		srno: 3,
		id: 3,
		name: "Audi A6",
		brand: "Audi",
		imageUrl: "https://example.com/audi_a6.jpg",
	},
	{
		srno: 4,
		id: 4,
		name: "Mercedes-Benz S-Class",
		brand: "Mercedes-Benz",
		imageUrl: "https://example.com/mercedes_s_class.jpg",
	},
	{
		srno: 5,
		id: 5,
		name: "Ford Mustang",
		brand: "Ford",
		imageUrl: "https://example.com/ford_mustang.jpg",
	},
];


export default function VehicleList() {
	const [modalOpen, setModalOpen] = useState<boolean>(false);
	const [editRow, setEditRow] = useState<any>(null);
	const { reset } = useForm();

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

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

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

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

	const handleCreate = async (data: {
		name: string;
		brand: string;
		imageUrl: string;
	}) => {
		try {
			await dispatch(addVehicle(data));
			await dispatch(vehicleList());
			handleCloseModal();
		} catch (error) {
			console.error("Creation failed", error);
		}
	};
	const handleUpdate = async (
		id: number,
		name: string,
		brand: string,
		imageUrl: string
	) => {
		try {
			await dispatch(
				updateVehicle({
					id,
					name,
					brand,
					imageUrl,
				})
			);
			await dispatch(vehicleList());
		} catch (error) {
			console.error("Update failed", error);
		}
	};
	const categoryColumns: Column[] = [
		{ id: "srno", label: "Sr No" },
		{ id: "name", label: "Vehicle Name" },
		{ id: "brand", label: "Brand" },
		{ id: "imageUrl", label: "Image" },
		{ id: "action", label: "Action", align: "center" },
	];

	const filteredVehicles = vehicles?.filter(
		(vehicle) =>
			vehicle.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
			vehicle.brand.toLowerCase().includes(searchTerm.toLowerCase())
	);

// const categoryRows = filteredVehicles?.length
// 	? filteredVehicles?.map(
// 			(
// 				vehicle: {
// 					id: number; 
// 					name: string;
// 					brand: string;
// 					imageUrl: string;
// 				},
// 				index: number
// 			) => ({
// 				id: vehicle?.id, 
// 				srno: index + 1,
// 				name: vehicle?.name,
// 				brand: vehicle?.brand,
// 				imageUrl: vehicle?.imageUrl,
// 			})
// 	  )
// 	: [];

	return (
		<>
			
				{/* Title and Add Category button */}
				<Typography
					component="h2"
					variant="h6"
					sx={{ mt: 2, fontWeight: 600 }}
				>
					Vehicles
				</Typography>
        <Box
				sx={{
					width: "100%",
					display: "flex",
					flexDirection: { xs: "column", sm: "row" },
					justifyContent: "space-between",
					alignItems: "center",
					mb: 2, // Add margin bottom for spacing
				}}
			>
				<TextField
					variant="outlined"
					size="small"
					placeholder="Search..."
					value={searchTerm}
					onChange={(e) => setSearchTerm(e.target.value)}
					sx={{
						width: { xs: "100%", sm: "30%" }, 
						marginBottom: { xs: 2, sm: 0 }, 
					}}
					InputProps={{
						startAdornment: (
							<SearchIcon
								sx={{ color: "#202020", marginRight: 1 }}
							/>
						),
					}}
				/>
				<Button
                  variant="contained"
                  size="medium"
                  sx={{
                    textAlign: "center",
                    width: { xs: "100%", sm: "auto" },
                  }}
                  onClick={handleClickOpen}
                >
                  Add Vehicle
                </Button>
        </Box>
			

			<CustomTable
				columns={categoryColumns}
				rows={categoryRows}
				setDeleteModal={setDeleteModal}
				deleteModal={deleteModal}
				setViewModal={setViewModal}
				viewModal={viewModal}
				setRowData={setRowData}
				setModalOpen={setModalOpen}
			/>
			{/* <AddEditCategoryModal
        open={modalOpen}
        handleClose={handleCloseModal}
        editRow={rowData}
      />
      <DeleteModal
        open={deleteModal}
        setDeleteModal={setDeleteModal}
        handleDelete={handleDelete}
      /> */}
		</>
	);
}