import React from 'react'
import { Select } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import { SelectValue } from 'antd/lib/select'

interface Props {
    onChange: (value: SelectValue) => void,
    onFocus?: (event?: React.FocusEvent<HTMLElement>) => void,
    onBlur?: (event?: React.FocusEvent<HTMLElement>) => void,
    onSearch: (value: string) => void,
    style?: React.CSSProperties,
    placeholder?: string | React.ReactNode,
    option: { value: string | number, text: string }[]
}

let { Option } = Select
function InputSearch(props: Props) {

    return <Select
        showSearch
        suffixIcon={<SearchOutlined />}
        style={props.style || { width: 200 }}
        placeholder={props.placeholder}
        optionFilterProp="children"
        onChange={props.onChange}
        onFocus={props.onFocus}
        onBlur={props.onBlur}
        onSearch={props.onSearch}
        filterOption={(input, option) =>
            option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
    >
        {
            props?.option?.map((option: { value: string | number, text: string }) => {
                return <Option value={option.value} key={option.value}>{option.text}</Option>
            })
        }
    </Select>
}
export default InputSearch