import React, { useRef, useState, useEffect } from "react";
import Alert from '@mui/material/Alert';
import Stack from '@mui/material/Stack';
import { IoCloseCircleOutline } from "react-icons/io5";

const Module_Alert_Confirmation = (props) => {

    const [showElement, setShowElement] = React.useState(true);

    useEffect(() => {
        const timer = setTimeout(function () {

            props.clear_display_alert_mysy();
            setShowElement(false);
        }, 4000);



    },
        [])

    return (
        <div className="module_alert_confirmation" >

            {showElement && props.alert_message && String(props.alert_type) === "success" && <div style={{
                width: "70%", margin: "auto",
                position: "fixed", marginLeft: '10%', top: "10px", "border-left": "1rem solid green",
                zIndex: '999999', background: '#2e7d32'
            }}>
                <Stack sx={{ width: '90%',  float: 'left' }} spacing={2}>
                    <Alert variant="filled" severity="success"> {props.alert_message}</Alert>
                </Stack>
                <Stack sx={{ width: '10%', float: 'right', textAlign: 'right', paddingRight: "10px", cursor: 'pointer', paddingLeft: '7%', paddingTop: '10px' }} onClick={() => {
                    props.clear_display_alert_mysy();
                    setShowElement(false);
                }}> <IoCloseCircleOutline style={{color:'#FFF'}}/>
                </Stack>
            </div>}

            {showElement && props.alert_message && String(props.alert_type) === "error" && <div style={{
                width: "70%", margin: "auto",
                position: "fixed", marginLeft: '5%', top: "10px", "border-left": "1rem solid red",
                zIndex: '999999', background: '#d32f2f'
            }}>
                <Stack sx={{ width: '90%',  float: 'left' }} spacing={2}>
                    <Alert variant="filled" severity="error"> {props.alert_message}</Alert>
                </Stack>
                <Stack sx={{ width: '10%', float: 'right', textAlign: 'right', paddingRight: "10px", cursor: 'pointer', paddingLeft: '7%', paddingTop: '10px' }} onClick={() => {
                    props.clear_display_alert_mysy();
                    setShowElement(false);
                }}> <IoCloseCircleOutline  style={{color:'#FFF'}}/>
                </Stack>

            </div>}

            {showElement && props.alert_message && String(props.alert_type) === "info" && <div style={{
                width: "70%", margin: "auto",
                position: "fixed", marginLeft: '5%', top: "10px",
                zIndex: '999999', background: '#0288d1'
            }}>
                <Stack sx={{ width: '90%', float: 'left' }} spacing={2}>
                    <Alert variant="filled" severity="info"> {props.alert_message}</Alert>
                </Stack>
                <Stack sx={{ width: '10%', float: 'right', textAlign: 'right', paddingRight: "10px", cursor: 'pointer', paddingLeft: '7%', paddingTop: '10px' }} onClick={() => {
                    props.clear_display_alert_mysy();
                    setShowElement(false);
                }}> <IoCloseCircleOutline  style={{color:'#FFF'}}/>
                </Stack>
            </div>}


            {showElement && props.alert_message && String(props.alert_type) === "warning" && <div style={{
                width: "80%", margin: "auto",
                position: "fixed", marginLeft: '5%', top: "10px",
                zIndex: '999999', background: '#ed6c02'
            }}>
                <Stack sx={{ width: '90%',  float: 'left' }} spacing={2}>
                    <Alert variant="filled" severity="warning"> {props.alert_message}</Alert>
                </Stack>

                <Stack sx={{ width: '10%', float: 'right', textAlign: 'right', paddingRight: "10px", cursor: 'pointer', paddingLeft: '7%', paddingTop: '10px' }} onClick={() => {
                    props.clear_display_alert_mysy();
                    setShowElement(false);
                }}> <IoCloseCircleOutline  style={{color:'#FFF'}}/>
                </Stack>

            </div>}


        </div >
    );
}
export default Module_Alert_Confirmation;