import React from 'react';
// import Select, { createFilter } from 'react-select';
import Select from 'react-select-v1';
import PropTypes from 'prop-types';

/**
 * A stateless component for Dropdown and Autocomplete Mobile.
 * DropdownMobile provide common functionality of dropdown 
 * Autocomplete provide the feature:As user types, the list appears with matching options 
 * Match is done from start of the options and not in between match.
 */

const DropdownMobile = (props) => {
    return (
        <div>
            {props.isDropdown ?
                <div
                    className="jp-dropdown-mobile-container"
                    aria-labelledby={props.id}>
                    <Select
                        {...props}
                        className={props.className}
                        clearable={props.clearable}
                        value={props.value}
                        onChange={props.onChange}
                        options={props.options}
                        placeholder={props.placeholder}
                        searchable={props.searchable}
                        disabled={props.disabled}
                    />
                </div>
                :
                <div
                    className="jp-autocomplete-mobile-container"
                    aria-labelledby={props.id}>


                    <Select
                        {...props}
                        className={props.className}
                        clearable={props.clearable}
                        value={props.value}
                        onChange={props.onChange}
                        options={props.options}
                        placeholder={props.placeholder}
                        searchable={props.searchable}
                        disabled={props.disabled}
                        matchPos={props.matchPos}
                    />
                </div>
            }
        </div>
    );
};
export default DropdownMobile;

DropdownMobile.defaultProps = {
    /** Whether to choose dropdown or autocomplete */
    isDropdown: 1,
    /** Specify the options the user can select from*/
    options: [{ value: '', label: 'Select Option' }
    ]
};

DropdownMobile.propTypes = {
    /**Classes to apply on element */
    className: PropTypes.string,
    /** Whether to choose dropdown or autocomplete */
    isDropdown: PropTypes.number,
    /** Control the current value */
    selectedOption: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.object
    ]),
    /** Subscribe to change events */
    onSelectedOptionChange: PropTypes.func,
    /** Specify the options the user can select from*/
    options: PropTypes.array.isRequired,
    /** Allow the user to search for matching options*/
    isSearchable: PropTypes.bool,
    /** Value of the search input*/
    selectedValue: PropTypes.string,
    /** Control the value of the search input*/
    onInputChange: PropTypes.func,
    /** Provides functionality to filter tha data from start/in-between*/
    filterstate: PropTypes.object,
    /** Text displayed when no option is selected*/
    placeholder: PropTypes.string,
    /** Subscribe to change events */
    onChange: PropTypes.func,
    /** Specify the current value of the control */
    value: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.object
    ]),
    /** Control the value of the search input */
    inputValue: PropTypes.string,
    /*  Unique ID for the field */
    id: PropTypes.string
};