import garbage_white from '../../../assets/images/garbage-white-big.svg';
import { useEffect, useState } from "react";

type MessageDeletePopupProps = {
    deleteAllMessage: () => void;
    setPopup: (p: boolean) => void;
};

const Pagination = ({ deleteAllMessage, setPopup}: MessageDeletePopupProps) => {
    const [isOpen, setIsOpen] = useState(true);

    useEffect(() => {
        window.addEventListener("click", () => {
            setPopup(false);
        });
    }, [isOpen]);

	return (
		<div  onClick={(e)=> e.stopPropagation()} className="massive-delete d-flex justify-content-center align-items-center">
            <div className="massive-delete-container d-flex justify-content-start">
                <div className="massive-delete-container--icon d-flex justify-content-center">
                    <img src={garbage_white} alt='delete all icon' />
                    {/* <button className="close" onClick={() => {setPopup(false)}}>X</button> */}
                </div>
                <div className="massive-delete-container--text align-self-center gx-3">
                    <p>Η ενέργεια αυτή θα καταργήσει όλα τα μηνύματα από όλες τις κατηγορίες. <br/> Να συνεχίσω; </p>
                </div>
                <div className="massive-delete-container--buttons d-flex justify-content-center">
                        <button onClick={
                            (e) => {
                                deleteAllMessage();
                                setPopup(false);                                
                                }                            
                            }
                            >
                            Ναι
                        </button>
                    
                    <button onClick={
                        () => {
                            setPopup(false)
                            }
                        }
                        >
                        Όχι
                     </button>
                </div>
            </div>
        </div>
	);
};

export default Pagination;