import React, { useEffect, useState } from "react";
import { Box, Modal, Typography, Divider, Grid, Button } 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: 500,
	borderRadius: 2,
	boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)",
	p: 0,
	display: "flex",
	flexDirection: "column",
	alignItems: "center",
};

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}>
				<Box
					sx={{
						display: "flex",
						justifyContent: "space-between",
						alignItems: "center",
						backgroundColor: "#000000",
						color: "#D0E1E9",
						padding: "20px 24px",
						width:"100%",
						 boxSizing: "border-box",
						borderRadius: "10px 10px 0 0",
					}}
				>
					<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",
									color: "#D0E1E9",
								}}
							>
								{selectedVehicle?.name || "Vehicle"}'s Details
							</Box>
							<Box
								onClick={() => setViewModal(false)}
								sx={{
									cursor: "pointer",
									display: "flex",
									alignItems: "center",
									color: "#D0E1E9",
								}}
							>
								<CloseIcon />
							</Box>
						</Box>
					</Typography>
				</Box>
				{/* <Divider sx={{ width: "100%" }} /> */}
				<Box
					sx={{
						backgroundColor: "#b5c4cb",
						padding: "20px",
						borderRadius: "0 0 10px 10px",
						
					}}
				>
					{selectedVehicle ? (
						<Grid container spacing={2} sx={{ width: "80%" }}>
							<Grid item xs={6}>
								<Typography variant="body1" color="#000000">
									<strong>Name:</strong>{" "}
									<Typography variant="body2" color="#454545">
										{selectedVehicle.name}
									</Typography>
								</Typography>
							</Grid>
							<Grid item xs={6}>
								<Typography variant="body1" color="#000000">
									<strong>Company:</strong>{" "}
									<Typography variant="body2" color="#454545">
										{selectedVehicle.company}
									</Typography>
								</Typography>
							</Grid>
							<Grid item xs={6}>
								<Typography variant="body1" color="#000000">
									<strong>Model Name:</strong>
									<Typography variant="body2" color="#454545">
										{selectedVehicle.modelName}
									</Typography>
								</Typography>
							</Grid>
							<Grid item xs={6}>
								<Typography variant="body1" color="#000000">
									<strong>Charge Type:</strong>
									<Typography variant="body2" color="#454545">
										{selectedVehicle.chargeType}
									</Typography>
								</Typography>
							</Grid>
							<Grid item xs={12}>
								<Typography
									variant="body1"
									gutterBottom
									color="#000000"
								>
									<strong>Image:</strong>
								</Typography>
								{selectedVehicle.imageUrl ? (
									<img
										src={
											selectedVehicle.imageUrl.startsWith(
												"http"
											)
												? selectedVehicle.imageUrl
												: `${process.env.REACT_APP_BACKEND_URL}/image/${selectedVehicle.imageUrl}`
										}
										alt="Vehicle"
										style={{
											width: "100%",
											maxHeight: "auto",
											objectFit: "cover",
											borderRadius: "8px",
										}}
										onError={(e) => {
											e.currentTarget.src =
												"/placeholder-image.png"; // fallback image
										}}
									/>
								) : (
									<Typography variant="body2" color="#454545">
										No image available
									</Typography>
								)}
							</Grid>
						</Grid>
					) : (
						<Typography align="center" color="#454545">
							No vehicle found with this ID
						</Typography>
					)}
					<Box
						sx={{
							display: "flex",
							justifyContent: "flex-end",
							mt: 3,
						}}
					>
						<Button
							onClick={() => setViewModal(false)}
							sx={{
								backgroundColor: "#000000",
								color: "#D0E1E9",
								borderRadius: "8px",
								fontSize: "16px",
								width: "117px",
								"&:hover": { backgroundColor: "#454545" },
							}}
						>
							Close
						</Button>
					</Box>
				</Box>
			</Box>
		</Modal>
	);
}
