import React, {ReactNode, useEffect, useRef} from 'react';
import SelectGroup from "./SelectGroup";

export type SelectItemProps = {
    children?: ReactNode
    value?: any
    checkbox?: boolean
    onClick?: any
    selected?: boolean
    style?:  React.CSSProperties
    active?: boolean
}

const SelectItem = ({children, onClick, selected=false, style, active=false, checkbox=false}: SelectItemProps) => {

    const scrollToRef = useRef();
    // if (active){
    //     // @ts-ignore
    //     scrollToRef?.current?.scrollIntoView(false)
    // }

    useEffect(()=>{
        if (active){
            // @ts-ignore
            scrollToRef?.current?.scrollIntoView({block: "nearest"})
        }
    }, [active])

    return (

        // @ts-ignore
       <li ref={scrollToRef} style={style} onClick={(e)=>{
           onClick && onClick()
           checkbox && e.stopPropagation()
       }} className={`${selected && 'selected'} ${active && 'active'}`}>
           {
               checkbox && <input type="checkbox" checked={selected} readOnly/>
           }

           {
               children
           }
       </li>
    );
}
SelectItem.displayName = 'SelectItem';
export default SelectItem;