import { Box, Button, IconButton, Modal, Typography } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { CustomIconButton } from "../../AddUserModal/styled.css";

type Props = {
	open: boolean;
	setDeleteModal: Function;
	handleDelete: (id: string | undefined) => void;
	id?: string | undefined;
};

const style = {
	position: "absolute",
	top: "50%",
	left: "50%",
	transform: "translate(-50%, -50%)",
	width: 330,
	bgcolor: "#000000",
	color: "#D0E1E9",
	borderRadius: 1.5,
	boxShadow: 24,
	p: 3,
};

const btnStyle = {
	py: 1,
	px: 5,
	width: "50%",
	textTransform: "capitalize",
	backgroundColor: "#D0E1E9",
	color: "#000000",
};
const btnStyleCancel = {
	py: 1,
	px: 5,
	width: "50%",
	textTransform: "capitalize",
};
export default function DeleteModal({
	open,
	setDeleteModal,
	handleDelete,
	id,
}: Props) {
	// console.log("DeleteModal opened with ID:", id)

	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"
					sx={{ flexGrow: 1 }} // This ensures the title takes up available space
				>
					Delete Record
				</Typography>
				<Box
					sx={{
						cursor: "pointer",
						display: "flex",
						alignItems: "center",
						justifyContent: "flex-end",
						marginTop: -3.5,
						
					}}
				>
					<CustomIconButton
						onClick={() => setDeleteModal(false)}
						aria-label="Close"
					>
						<CloseIcon />
					</CustomIconButton>
				</Box>

				<Typography
					id="modal-modal-description"
					sx={{ mt: 2 }}
					align="center"
				>
					Are you sure you want to delete this record?
				</Typography>
				<Box
					sx={{
						display: "flex",
						justifyContent: "space-between",
						mt: 4,
						gap: 2,
					}}
				>
					<Button
						type="button"
						sx={btnStyle}
						onClick={() => setDeleteModal(false)}
					>
						Cancel
					</Button>
					<Button
						type="button"
						variant="contained"
						color="error"
						sx={btnStyleCancel}
						onClick={() => handleDelete(id || "")}
					>
						Delete
					</Button>
				</Box>
			</Box>
		</Modal>
	);
}
