import React, { useEffect, useState } from "react";
import { Box, Modal, Typography, Divider, Grid } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { useSelector } from "react-redux";
import { RootState } from "../../../redux/reducers";

type Props = {
	open: boolean;
	setViewModal: Function;
	handleView: (id: string | undefined) => void;
	id?: number | undefined;
};

const style = {
	position: "absolute",
	top: "50%",
	left: "50%",
	transform: "translate(-50%, -50%)",
	width: 400,
	bgcolor: "background.paper",
	borderRadius: 2,
	boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)",
	p: 4,
	display: "flex",
	flexDirection: "column",
	alignItems: "center",
	gap: 2,
};

export default function VehicleViewModal({ open, setViewModal, id }: Props) {
	const { vehicles } = useSelector(
		(state: RootState) => state.vehicleReducer
	);
	const [selectedVehicle, setSelectedVehicle] = useState<any>(null);

	useEffect(() => {
		if (id) {
			const vehicle = vehicles.find((vehicle) => vehicle.id === id);
			setSelectedVehicle(vehicle || null);
		}
	}, [id, vehicles]);

	return (
		<Modal
			open={open}
			aria-labelledby="modal-title"
			aria-describedby="modal-description"
		>
			<Box sx={style}>
				<Typography
					id="modal-title"
					variant="h5"
					fontWeight="bold"
					sx={{ width: "100%" }}
				>
					<Box
						sx={{
							display: "flex",
							alignItems: "center",
							justifyContent: "space-between",
							width: "100%",
						}}
					>
						<Box sx={{ flex: 1, textAlign: "center" }}>
							{selectedVehicle?.name || "Vehicle"}'s Details
						</Box>
						<Box
							onClick={() => setViewModal(false)}
							sx={{
								cursor: "pointer",
								display: "flex",
								alignItems: "center",
							}}
						>
							<CloseIcon />
						</Box>
					</Box>
				</Typography>

				<Divider sx={{ width: "100%" }} />

				{selectedVehicle ? (
					<Grid container spacing={2} sx={{ width: "80%" }}>
						<Grid item xs={6}>
							<Typography variant="body1">
								<strong>Name:</strong>{" "}
								<Typography variant="body2">
									{selectedVehicle.name}
								</Typography>
							</Typography>
						</Grid>
						<Grid item xs={6}>
							<Typography variant="body1">
								<strong>Company:</strong>{" "}
								<Typography variant="body2">
									{selectedVehicle.company}
								</Typography>
							</Typography>
						</Grid>
						<Grid item xs={6}>
							<Typography variant="body1">
								<strong>Model Name:</strong>
								<Typography variant="body2">
									{selectedVehicle.modelName}
								</Typography>
							</Typography>
						</Grid>
						<Grid item xs={6}>
							<Typography variant="body1">
								<strong>Charge Type:</strong>
								<Typography variant="body2">
									{selectedVehicle.chargeType}
								</Typography>
							</Typography>
						</Grid>
						<Grid item xs={6}>
							<Typography variant="body1">
								<strong>Image URL:</strong>
								<Typography variant="body2">
									{selectedVehicle.imageUrl ?? "N/A"}
								</Typography>
							</Typography>
						</Grid>
					</Grid>
				) : (
					<Typography align="center">
						No vehicle found with this ID
					</Typography>
				)}
			</Box>
		</Modal>
	);
}
