import { useEffect, useRef } from 'react';
import { Row } from './components/Row/Row';
import styles from './Popup.module.css';
import { TAG_ADDR } from './constants';

export const Popup = ( {isOpen = false, setIsOpen} ) => {

    useEffect(() => {
        if (isOpen === true) {
            document.body.style.overflow = "hidden";
        } else {
            document.body.style.overflow = "";
        }
    },[isOpen]);


    function onClickHandle(event) {
        if (event.target !== event.currentTarget)
            return;
        setIsOpen(false);
    }

    return (
        <div
            className={styles.container}
            onClick={onClickHandle}
            style={{ display: isOpen ? "flex" : "none" }}
        >
            <div className={styles.column}>
                {TAG_ADDR.map(({tag, addr}, index) => (
                    <Row
                        key={index}
                        onClickTag={() => {setIsOpen(false)}}
                        tag={tag}
                        addr={addr}
                    />
                ))}
            </div>
        </div>
    )
}