import React, {ReactNode, useEffect, useRef, useState} from 'react';
import './PopupColumn.scss'
import ListColumn from "./ListColumn";
import close from '../../../../assets/images/close.png'

type PopupColumnProps = {
    children: ReactNode[]
    flex?: string
    right?: boolean
    disabled?: boolean
    className?: string
}

const PopupColumn = ({children, flex = 'auto', right = false, disabled = false, className}: PopupColumnProps) => {


    const [isOpen, setIsOpen] = useState(false)
    const popupRef = useRef(null)

    useEffect(() => {

        /**
         * we want to run validation when we go from open to close state, but no the first time it mounts
         */

        const handleClick = (e: any) => {
            if (isOpen) {
                if (e.source && e.source.current === popupRef.current) return
                setIsOpen(false)
            }
        }
        window.addEventListener('click', handleClick)
        return () => {
            window.removeEventListener('click', handleClick)
        }
    }, [isOpen]);


    return (
        <ListColumn
            right={right}
            flex={flex}
        >
            <div className={`popup-column ${isOpen && 'open'} ${right && 'right'} ${disabled && 'disabled'} ${className}`}>
                <div ref={popupRef} className='popup-column--toggle'
                     onClick={(e) => {
                         // @ts-ignore
                         e.nativeEvent.source = popupRef
                         setIsOpen(o => !o)
                     }}
                >
                    {children[0]}
                </div>
                {
                    isOpen &&
                    <div className='popup-column--dropdown'
                         onClick={(e) => e.stopPropagation() }
                    >
                        <img src={close} alt="" className={'close-btn'} onClick={()=>setIsOpen(false)}/>
                        {children[1]}
                    </div>
                }
            </div>
        </ListColumn>
    );
}

export default PopupColumn;