import React from 'react';
import PropTypes from 'prop-types';
import Select from 'react-select-v1';
import 'react-select-v1/dist/react-select.css';

/**
 * A stateless Multiselect for desktop. It uses react-select. helps for selecting multiple options from dropdown as 
 * well single selection. dropdown will receive all additional props.
 */

const DesktopMultiSelectDropdown = (props) => {

    return (
        <div>
            <div
                aria-labelledby={props.id}
                role='listbox'
                className={props.isIconDropdown ? 'jp-desktop-multiselect-dropdown-container-dropdown' : 'jp-desktop-dropdown-with-icon-container'}>
                <Select
                    {...props}
                    id={props.id}
                    clearable={false}
                    closeOnSelect={props.closeMenuOnSelect}
                    value={props.value}
                    onChange={props.onChange}
                    options={props.options}
                    multi={props.multi}
                    disabled={props.disabled}
                    hideSelectedOptions={props.hideSelectedOptions}
                    backspaceRemoves={props.backspaceRemovesValue}
                    placeholder={props.placeholder}
                    searchable={props.searchable}
                />
            </div >
        </div>
    );
};

export default DesktopMultiSelectDropdown;

DesktopMultiSelectDropdown.defaultProps = {
    closeMenuOnSelect: false,
    value: [],
    options: [],
    multi: true,
    placeholder: 'Select Option',
    disabled: true,
    isIconDropdown: true,
    searchable: true,
    backspaceRemovesValue: false,
    hideSelectedOptions: true
};

DesktopMultiSelectDropdown.propTypes = {
    /** menu should not close on select option */
    closeMenuOnSelect: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.number
    ]),
    /** selected value in dropdown */
    value: PropTypes.array,
    /** onchange dropdown value */
    onChange: PropTypes.func,
    /** should select multiple values from dropdown */
    multi: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.number
    ]),
    /** placeholder for dropdown */
    placeholder: PropTypes.string,
    /** to disabled the dropdown */
    disabled: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.number
    ]),
    /** flag for dropdown with or without icon */
    isIconDropdown: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.number
    ]),
    /** Allow the user to search for matching options */
    searchable: PropTypes.bool,
    /** options array */
    options: PropTypes.array,
    /** hide selected option from list of options  */
    hideSelectedOptions: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.number
    ]),
    /** backspaceRemovesValue */
    backspaceRemovesValue: PropTypes.bool,
    /** id for each dropdown */
    id: PropTypes.string
};