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

type Props = {
	open: boolean;
	setViewModal: Function;
	id?: string;
};

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 ViewModal({ open, setViewModal, id }: Props) {
	const { admins } = useSelector((state: RootState) => state.adminReducer);
	const [selectedAdmin, setSelectedAdmin] = useState<any>(null);

	useEffect(() => {
		if (id) {
			const admin = admins.find((admin) => admin.id === id);
			setSelectedAdmin(admin);
		}
	}, [id, admins]);

	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" }}>
							{selectedAdmin?.name || "Admin"}'s Details
						</Box>
						<Box
							onClick={() => setViewModal(false)}
							sx={{
								cursor: "pointer",
								display: "flex",
								alignItems: "center",
							}}
						>
							<CloseIcon />
						</Box>
					</Box>
				</Typography>

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

				{selectedAdmin ? (
					<Grid container spacing={2} sx={{ width: "80%" }}>
						<Grid item xs={6}>
							<Typography variant="body1">
								<strong>Name:</strong>
								<Typography variant="body2">
									{selectedAdmin.name}
								</Typography>
							</Typography>
						</Grid>
						<Grid item xs={6}>
							<Typography variant="body1">
								<strong>Phone:</strong>
								<Typography variant="body2">
									{selectedAdmin.phone}
								</Typography>
							</Typography>
						</Grid>
						<Grid item xs={6}>
							<Typography variant="body1">
								<strong>Email:</strong>
								<Typography variant="body2">
									{selectedAdmin.email}
								</Typography>
							</Typography>
						</Grid>
						<Grid item xs={6}>
							<Typography variant="body1">
								<strong>Address:</strong>

								<Typography variant="body2">
									{selectedAdmin?.Admins?.[0]
										?.registeredAddress ?? "N/A"}
								</Typography>
							</Typography>
						</Grid>
					</Grid>
				) : (
					<Typography align="center">
						No admin found with this ID
					</Typography>
				)}
			</Box>
		</Modal>
	);
}
