import React from 'react';
import { Modal, Button, Spinner, ModalBody } from 'react-bootstrap';

import create from '../../../assets/images/illustration/submitExercise.png';
import cue from '../../../assets/images/illustration/successModal.png';
import ask from '../../../assets/images/illustration/IllustrationForgot.png'

const ModalOperation = ({
    show, 
    handleClose, 
    title, 
    description, 
    loading, 
    successMessage, 
    confirmAction, 
    handleConfirm 
}) => {
    return (
        <Modal show={show} onHide={handleClose} centered>
            {loading?(
                <Modal.Body className='p-4 d-flex flex-column items-center'>
                    <div className='d-flex' style={{margin:"5vh 0"}}>
                        <Spinner animation="grow" variant="primary" />
                        <Spinner animation="grow" variant="secondary" />
                        <Spinner animation="grow" variant="success" />
                        <Spinner animation="grow" variant="danger" />
                        <Spinner animation="grow" variant="warning" />
                        <Spinner animation="grow" variant="info" />
                    </div>
                </Modal.Body>
            ):(
                confirmAction?(
                    <Modal.Body className='p-4 d-flex flex-column items-center'>
                        <h4 className='mb-4 fw-bold text-dark'><span className='text-red'>Delete</span> This Data</h4>
                        <img src={ask} alt="" className="w-50"/>
                        {/* <p className='my-3 text-muted fw-light text-center'>Once deleted, this cannot be restored. Do you wish to go ahead?</p> */}
                        <p className='my-3 text-muted fw-light text-center'>{description}</p>
                        <div className="w-100 d-flex justify-content-center">
                            <Button variant="outline-muted" className="py-2 px-5 mx-1 rounded-35" onClick={handleClose}>Cancel</Button>
                            <Button variant="red" className="py-2 px-5 mx-1 rounded-35" onClick={handleConfirm}>Delete</Button>
                        </div>
                    </Modal.Body>
                ):(
                    title === "ERROR"?(
                        <Modal.Body className='p-4 d-flex flex-column items-center'>
                            <h4 className='mb-4 fw-bold text-red'>ERROR!</h4>
                            <img src={ask} alt="" className="w-50"/>
                            <p className='my-3 text-muted fw-light text-center'>{successMessage}</p>
                            <Button variant="red" className="w-100 py-2 px-5 rounded-35" onClick={handleClose}>Close</Button>
                        </Modal.Body>
                    ):(
                        <Modal.Body className='p-4 d-flex flex-column items-center'>
                            <h4 className='mb-4 fw-bold text-dark'>Data <span className='text-blue'> Successfully</span> {title}!</h4>
                            <img src={title === 'Created'? create : cue } alt="" className="w-50"/>
                            <p className='my-3 text-muted fw-light text-center'>{successMessage}</p>
                            <Button variant="gd" className="w-100 py-2 px-5 rounded-35" onClick={handleClose}>Got It</Button>
                        </Modal.Body>
                    )
                )
            )}
        </Modal>
    );
};

export default ModalOperation;
