// Dependencies
import React, { FC } from 'react';
import { Modal as MuiModal } from "@mui/material";
import cx from 'classnames';
// Components
import { Button } from '../Button';

// Styles
import './style.scss';
import { ModalAlertProps } from "./types"

export const ModalAlert: FC<ModalAlertProps> = ({
	title = "",
	text = "",
	cancelText = "Cancel",
	acceptText = "Accept",
	open = false,
	className = "",
	style = {},
	onCancel,
	onAccept,
	onClose,
}) => {
	const handleCancel = () => {
		if (onCancel) {
			onCancel();
		}
		if (onClose) {
			onClose();
		}
	};

	const handleAccept = () => {
		if (onAccept) {
			onAccept();
		}
		if (onClose) {
			onClose();
		}
	};

	return (
		<MuiModal
			open={open}
			aria-labelledby="modal-alert-title"
			aria-describedby="modal-alert-description"
			className={cx("gtc-rc-modal-alert-container", className)}
			style={{ ...style }}
			onClose={onClose}
		>
			<div className="gtc-rc-modal-alert">
				{title && (
					<div className="gtc-rc-modal-alert-title">
						{title}
					</div>
				)}
				
				{text && (
					<div className="gtc-rc-modal-alert-text">
						{text}
					</div>
				)}

				<div className="gtc-rc-modal-alert-actions">
					<Button 
						variant="secondary" 
						onClick={handleCancel}
						style={{ marginRight: 8 }}
					>
						{cancelText}
					</Button>
					<Button 
						variant="primary" 
						onClick={handleAccept}
					>
						{acceptText}
					</Button>
				</div>
			</div>
		</MuiModal>
	);
};
