import { Box, Button, Modal, Typography } from "@mui/material";
import { AppDispatch, RootState } from "../../../redux/store/store";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useState } from "react";
 
type Props = {
    open: boolean;
    setViewModal: Function;
    handleView: (id: string | undefined) => void;
    id?: string | undefined;
};
;
 
const style = {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: 330,
    bgcolor: "background.paper",
    borderRadius: 1.5,
    boxShadow: 24,
    p: 3,
};
 
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize", alignItems: "center" };
 
export default function ViewModal({
    open,
    setViewModal,
    id, // Selected user's 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 || null);
        }
    }, [id, admins]);
 
    return (
        <Modal
            open={open}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
        >
            <Box sx={style}>
                <Typography
                    id="modal-modal-title"
                    variant="h6"
                    component="h2"
                    align="center"
                >
                    Details of {selectedAdmin?.name}
                </Typography>
                {selectedAdmin ? (
                    <>
                        <Typography align="center">Name: {selectedAdmin?.name}</Typography>
                        <Typography align="center">Email: {selectedAdmin?.email}</Typography>
                        <Typography align="center">Phone: {selectedAdmin?.phone}</Typography>
                        <Typography align="center">Address: {selectedAdmin?.registeredAddress}</Typography>
                    </>
                ) : (
                    <Typography align="center">No admin found with this ID</Typography>
                )}
                <Box sx={{ display: "flex", justifyContent: "space-between", mt: 4, gap: 2 }}>
                    <Button
                        variant="contained"
                        color="error"
                        type="button"
                        sx={btnStyle}
                        onClick={() => setViewModal(false)}
                    >
                        Close
                    </Button>
                </Box>
            </Box>
        </Modal>
    );
}