import React, {ReactNode, useEffect, useRef} from 'react';

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

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

    const scrollToRef = useRef();

    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'} ${disabled && 'disabled'} ${active && 'active'}`}
        >

            {
                checkbox && <input disabled={disabled} type="checkbox" checked={selected} readOnly/>
            }

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