import { Select } from 'antd';
import type { SelectProps } from 'antd';
import React from 'react';

interface IProps {
    placeholder?: string;
    width?: number,
    options: SelectProps['options'];
    onScrollBottom: (isAdd: boolean) => void;
    onSelect: (value: string) => void;
    defaultValueProp: string;
    disabled?: boolean
}

const SelectSearchPage: React.FC<IProps> = (props) => {

    return <Select
        disabled={props.disabled}
        style={props.width ? {width: `${props.width}px`} : {}}
        defaultValue={props.defaultValueProp}
        showSearch
        placeholder={props.placeholder}
        optionFilterProp="children"
        options={props.options}
        filterOption={(input, option) => {
            if (option?.label && typeof option?.label === 'string') {
                return option.label.includes(input);
            }
            return false;
        }}
        onPopupScroll={(e) => {
            if (e.target.scrollTop + e.target.offsetHeight >= e.target.scrollHeight) {
                props.onScrollBottom(true);
            }
        }}
        onSelect={(value: string) => props.onSelect(value)}
    />
}

SelectSearchPage.defaultProps = {
    disabled: false
}

export default SelectSearchPage;