import React, { useState, useEffect } from 'react';
import { Alert as AlertComponent } from 'react-bootstrap';
import './css/alert.css';

const Alert = ({ showAlert, alertType, alertMessage, setShowAlert, setAlertType, setAlertMessage }) => {
    const handleClose = () => {
        setAlertType(0);
        setAlertMessage("");
        setTimer(5);
        setShowAlert(false);
    }

    const handleShow = () => setShowAlert(true);
    const [timer, setTimer] = useState(5);

    useEffect(() => {
        setTimeout(() => setTimer(timer - 1), 1000);

        if (timer === 0) {
            setAlertType(0);
            setAlertMessage("");
            setTimer(5);
            setShowAlert(false);
        }

    }, [timer, setShowAlert]);


    if (alertType === 1) {
        return (
            <div className='alert-area'>
                <AlertComponent variant="danger" onClose={handleClose} show={showAlert} dismissible>
                    {alertMessage}
                </AlertComponent>
            </div>
        );
    }
    else if (alertType === 2) {
        return (
            <div className='alert-area'>
                <AlertComponent variant="success" onClose={handleClose} show={showAlert} dismissible>
                    {alertMessage}
                </AlertComponent>
            </div>
        );
    }
}

export default Alert;