import { useDispatch, useSelector } from 'react-redux';
import {
	Button,
	Dialog,
	DialogActions,
	DialogContent,
	DialogTitle,
	IconButton,
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { setModal } from '../redux/features/providers/providersSlice';
import { MODAL_TYPES } from '../constants/constants';
import Spinner from './Spinner';

const ModalComponent = props => {
	const { modal } = useSelector(state => state.providers);
	const dispatch = useDispatch();
	const handleClose = () => {
		dispatch(setModal({ open: false, type: '', data: {} }));
	};

	return (
		<Dialog
			open={modal.open && modal.type === props.type}
			onClose={handleClose}
			scroll='paper'
			aria-labelledby='scroll-dialog-title'
			aria-describedby='scroll-dialog-description'
			maxWidth='sm'
			fullWidth
			{...props}>
			<DialogTitle id='scroll-dialog-title' fontWeight='bold'>
				{props.title}
			</DialogTitle>
			<IconButton
				title='Close'
				aria-label='close'
				onClick={handleClose}
				disabled={props.isLoading}
				sx={{
					position: 'absolute',
					right: 8,
					top: 8,
					color: theme => theme.palette.grey[500],
				}}>
				<CloseIcon />
			</IconButton>

			<DialogContent dividers>{props.children}</DialogContent>
			{props.type !== MODAL_TYPES.connection_settings && (
				<DialogActions>
					{props.type === MODAL_TYPES.delete_location &&
					modal?.data?.type == 2 &&
					modal?.data?.associated_products ? null : (
						<Button
							variant='contained'
							sx={{ textTransform: 'capitalize' }}
							onClick={handleClose}
							disabled={props.isLoading}
							title={props.type === MODAL_TYPES.delete_location ? 'Cancel' : 'Close'}>
							{props.type === MODAL_TYPES.delete_location ? 'Cancel' : 'Close'}
						</Button>
					)}

					{props.type !== MODAL_TYPES.delete_location && (
						<Button
							variant='contained'
							sx={{ textTransform: 'capitalize' }}
							onClick={props.handleSubmit}
							disabled={props.isLoading}
							title='Save'>
							{props.isLoading ? <Spinner size={25} /> : 'Save'}
						</Button>
					)}

					{props.type === MODAL_TYPES.delete_location && (
						<Button
							variant='contained'
							sx={{ textTransform: 'capitalize' }}
							onClick={props.handleDelete}
							disabled={props.isLoading}
							title='Confirm'>
							{props.isLoading ? (
								<Spinner size={25} />
							) : modal?.data?.associated_products ? (
								'OK'
							) : (
								'Confirm'
							)}
						</Button>
					)}
				</DialogActions>
			)}
		</Dialog>
	);
};

export default ModalComponent;