import React, {useState, useEffect, useCallback} from "react";
import garbageBinWhite from "../../../../../assets/images/garbage-white-big.svg";
import Garbage from "../../../../SVG/Garbage";

type InvitationBoxProps = {
    email: string
    deleteVisitor : () => void
}

const InvitationBox = ({email, deleteVisitor} : InvitationBoxProps) => {

    const [beingHandled, setBeingHandled] = useState<boolean>(false);

    const noDelete = useCallback((e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
        e.stopPropagation();

        setBeingHandled(false);
      }, []);

    useEffect(() => {
        setBeingHandled(false);
      }, [deleteVisitor,noDelete]);


    return (
        <div className="person-wrapper" onClick={() => setBeingHandled(true)}>
            {beingHandled 
                ?
                <li className='person-container-inner-handled'>
                    <div className="person-container-inner-handled--text-area">
                        <img src={garbageBinWhite} alt="garbage bin" />
                        <p>Να το αφαιρέσω;</p>
                    </div>
                    <div className="person-container-inner-handled--btn-area">
                        <a onClick={() => {
                            deleteVisitor();
                        }}>Ναι</a>
                        <a onClick={(e) => {
                            noDelete(e);
                        }}>Όχι</a>
                    </div>
                </li>
                :
                <li className='person-container-inner'>
                    <p className='person'>{email}</p>
                    <div className={'garbagebin'}><Garbage/></div>
                </li>
            }
        </div>
    );
}

export default InvitationBox;