import { CancelOutlined, CheckOutlined } from "@mui/icons-material";
import {
	Dialog,
	DialogActions,
	DialogContent,
	DialogContentText,
	DialogTitle,
} from "@mui/material";
import { FC, useEffect, useState } from "react";

import { ButtonWithIcon } from "./ButtonWithIcon";

interface Props {
	open: boolean;
	onConfirm: () => void;
	title?: string;
	text: string;
}
export const Confirmation: FC<Props> = (props) => {
	const [open, setOpen] = useState(props.open);

	useEffect(() => {
		setOpen(props.open);
	}, [props.open]);

	const handleClose = () => {
		setOpen(false);
	};

	const handleOk = () => {
		props.onConfirm();
		setOpen(false);
	};

	const handleCancel = () => {
		setOpen(false);
	};

	return (
		<Dialog
			open={open}
			onClose={handleClose}
			aria-labelledby="alert-dialog-title"
			aria-describedby="alert-dialog-description"
		>
			<DialogTitle id="alert-dialog-title">
				{props.title || "Are you sure?"}
			</DialogTitle>
			<DialogContent>
				<DialogContentText id="alert-dialog-description">
					{props.text}
				</DialogContentText>
			</DialogContent>
			<DialogActions>
				<ButtonWithIcon
					onClick={handleOk}
					title="Ok"
					color="success"
					icon={<CheckOutlined />}
				/>
				<ButtonWithIcon
					onClick={handleCancel}
					autoFocus
					title="Cancel"
					icon={<CancelOutlined />}
				/>
			</DialogActions>
		</Dialog>
	);
};
