import React from 'react';
import Select from 'react-select-v1';
import PropTypes from 'prop-types';
import { CrossIcon } from '../../atom/CrossIcon/CrossIcon';
import { ModalPopUp } from '../../atom/ModalPopUp/ModalPopUp';


/** 
 * A stateless component for dropdown and autosuggest for mobile.
 * Dropdown provide common functionality of dropdown
 * Autosuggest provide the feature:As user types, the list appears with matching options
*/

const AutocompleteMobiledropdown = (props) => {

    const dropdownSelect = (
        <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}
            noResultsText={props.noResultsText}
            matchPos={props.matchPos}
        />
    );

    return (
        <ModalPopUp
            childClassName='jp-mobile-autocomplete-withicon-modalpopup'
            isOpen={props.isSearchModalOpen}
            onRequestClose={props.closeMobileModalSearch}
        >
            <div className={'jp-mobile-autocomplete-withicon-container ' + props.parentClassName}>
                <div className='jp-mobile-autocomplete-withicon-crossicon'>
                    <div className='crossiconsearch'>
                        <CrossIcon onClick={props.onCrossIcon} />
                    </div>
                </div>
                <div className='jp-autocomplete-mobile-dropdown'>
                    <div className='jp-desktop-single-dropdown-with-icon-container'>
                        <div className='jp-mobile'>MOBILE NUMBER</div>
                        {dropdownSelect}
                    </div>
                </div>
            </div>
        </ModalPopUp>
    );
};
export default AutocompleteMobiledropdown;

AutocompleteMobiledropdown.defaultProps = {

    /** Specify the options the user can select from */
    options: [{ value: '', label: '' },
    ],
    /** Allow the user to search for matching options */
    searchable: true,
    /** Allow user to disable the dropdown */
    disabled: true,
    /** Allow user to clear icon to hide */
    clearable: true,
    /** Allow user to search result to match the text entered at the start or any position in the option value */
    matchPos: 'start',
    /** Allow user to change display Text if Result not found*/
    noResultsText: 'No matching result found'
};

AutocompleteMobiledropdown.propTypes = {
    /** Classes to apply on element */
    className: PropTypes.string,
    /** specify the current value of the control */
    value: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.array
    ]),
    /** Subscribe to change events */
    onChange: PropTypes.func,
    /** Specify the options the user can select from */
    options: PropTypes.array.isRequired,
    /** flag to show modal or not */
    isSearchModalOpen: PropTypes.bool,
    /** Allow the user to search for matching options */
    searchable: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.number
    ]),
    /** Allow user to clear icon to clear */
    clearable: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.number
    ]),
    /** Allow user to disable the dropdown */
    disabled: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.number
    ]),
    /** Text displayed when no option is selected */
    placeholder: PropTypes.string,
    /** Function to be get called on click of cross Icon */
    closeMobileModalSearch: PropTypes.func,
    /** Function to be get called on click of Cross Icon */
    onCrossIcon: PropTypes.func,
    /** Class applied to parent container for additional styling  */
    parentClassName: PropTypes.string,

};