import ReactModal from 'react-modal';
import { ModalStyles } from '../assets/styles/ModalStyles';
import PuffLoader from 'react-spinners/PuffLoader';
import Typewriter from 'typewriter-effect/dist/core';
import CloseButton from './CloseButton';

const ProgressModal = (props: {
	openProgressModal: boolean;
	setOpenProgressModal: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
	const { openProgressModal, setOpenProgressModal } = props;

	var firstTypewriter = new (Typewriter as any)(
		document.querySelector('.type-first'),
		{ devMode: true }
	);
	const typeFirstProgress = () => {
		firstTypewriter
			.typeString('Duplicating the Sermon Slides template file: ')
			.start();
	};

	return (
		<ReactModal
			isOpen={openProgressModal}
			style={ModalStyles}
			className={'progress-modal'}
			closeTimeoutMS={1000}
			onAfterOpen={typeFirstProgress}
		>
			<CloseButton setOpenModal={setOpenProgressModal} />
			<div className={'d-flex flex-column align-items-center my-4'}>
				<PuffLoader color="#36d7b7" size={150} />
				<div className={'progress-text p-3'}>
					<div className="type-first"></div>
					<div className="second"></div>
				</div>
			</div>
		</ReactModal>
	);
};

export default ProgressModal;