import { Modal, Box, Typography, Button } from '@mui/material';
import type React from 'react';

import styles from './ConfirmationModal.module.scss';
import type { ConfirmationModalInterface } from './ConfirmationModalHelper';

const style = {
	position: 'absolute',
	top: '50%',
	left: '50%',
	transform: 'translate(-50%, -50%)',
	width: 580,
	bgcolor: 'background.paper',
	boxShadow: 24,
	p: 4
};

const isHtml = (str: string): boolean => {
	const htmlPattern = /<([a-z]+[^/>]*)[^>]*>(.*?)<\/\1>|<([a-z]+[^/>]*)[^/>]*\/?>/i;
	return htmlPattern.test(str);
};

// const onBeforeConfirm = () => {
// 	console.log('onBeforeConfirm', formControlClasses.);
// }

const ConfirmationModal: React.FC<ConfirmationModalInterface> = ({
	open,
	handleClose,
	handleConfirm,
	handleThirdButton,
	config
}: ConfirmationModalInterface) => {
	const {
		title,
		message,
		confirmButtonText,
		confirmButtonColor,
		cancelButtonText,
		thirdButtonText
	} = config;
	const messageArray = Array.isArray(message) ? message : [message];
	return (
		<Modal open={open} onClose={handleClose}>
			<Box sx={style}>
				<Typography variant="h6" component="h2">
					{title}
				</Typography>
				<form id="confirmation-modal-form" className={styles.modalContent}>
					{messageArray.map((message, index) => (
						<Typography key={index} sx={{ mt: 2 }} dangerouslySetInnerHTML={{ __html: message }} />
					))}
				</form>
				<Box
					sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end' }}
					className={styles.modalButtons}
				>
					<Button
						onClick={handleClose}
						color="primary"
						variant="outlined"
						sx={{ mr: 2 }}
						className={styles.cancelButton}
					>
						{cancelButtonText || 'Cancel'}
					</Button>
					<Button
						onClick={() => handleConfirm()}
						color={confirmButtonColor === 'red' ? 'error' : 'primary'}
						variant="contained"
						className={`${styles.confirmButton} ${
							confirmButtonColor === 'red' ? styles.confirmButtonRed : ''
						} ${thirdButtonText ? styles.confirmButtonMargin : ''}`}
					>
						{confirmButtonText || 'Confirm'}
					</Button>
					{thirdButtonText && (
						<Button
							onClick={() => handleConfirm(true)}
							color="primary"
							variant="contained"
							className={styles.confirmButton}
						>
							{thirdButtonText}
						</Button>
					)}
				</Box>
			</Box>
		</Modal>
	);
};

export default ConfirmationModal;