import React from 'react';
import Select from 'react-select-v1';
import PropTypes from 'prop-types';

/** 
 * A stateless component for dropdown and autosuggest for desktop.
 * Dropdown provide common functionality of dropdown
 * Autosuggest 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 DropdownDesktop = (props) => {

    props.isSortByAlphabet ?
        (props.options.sort((a, b) => {
            if (a.value < b.value) return -1;
            else if (a.value > b.value) return 1;
            return 0;
        }))
        :
        (props.options.sort((a, b) => a.value - b.value));

    const dropdownSelect = (<Select
        {...props}
        id={props.id}
        className={props.className}
        clearable={props.clearable}
        value={props.value}
        onChange={props.onChange}
        options={props.options}
        placeholder={props.placeholder}
        searchable={props.searchable}
        disabled={props.disabled}

    />);
    return (
        <div>
            {(() => {
                switch (props.selectedDropdown) {
                case 'normalDropdown':
                    return (
                        <div
                            role='textbox'
                            aria-labelledby={props.id}
                            className='jp-desktop-single-dropdown-container'>
                            {dropdownSelect}
                        </div>);
                case 'iconDropdown':
                    return (
                        <div
                            role='textbox'
                            aria-labelledby={props.id}
                            className='jp-desktop-single-dropdown-with-icon-container'>
                            {dropdownSelect}
                        </div>);
                case 'dividerDropdown':
                    return (
                        <div
                            role='textbox'
                            aria-labelledby={props.id}
                            className='jp-desktop-single-dropdown-container-divider'>
                            {dropdownSelect}
                        </div>);
                case 'autosuggestDropdown':
                    return (
                        <div
                            //role='textbox'
                            aria-labelledby={props.id}
                            className={props.id==='ddlSingleAutosuggestIcon'? 'jp-desktop-single-dropdown-with-icon-autosuggest-container' : !props.isSingleAutosuggestDropdownWithArrow?'jp-desktop-single-dropdown-autosuggest-container1':'jp-desktop-single-dropdown-autosuggest-container'}>
                            <Select
                                {...props}
                                id={props.id}
                                clearable={props.clearable}
                                disabled={props.disabled}
                                className={props.className}
                                value={props.value}
                                onChange={props.onChange}
                                inputValue={props.inputValue}
                                onInputChange={props.onInputChange}
                                options={props.options}
                                placeholder={props.placeholder}
                                matchPos={props.matchPos}
                                searchable={props.searchable}
                            />
                        </div>);
                default:
                    return null;
                }
            })()}
        </div>
    );
};
export default DropdownDesktop;

DropdownDesktop.defaultProps = {
    /** Specify the current value of the control */
    value: '',
    /** 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 select Single Autosuggest icon for small fields or large fileds */
    isSingleAutosuggestDropdownWithIcon: true,

    isSingleAutosuggestDropdownWithArrow: true,
    /** option to specify sort either by alphabet or number */
    isSortByAlphabet: true
};

DropdownDesktop.propTypes = {
    /** Classes to apply on element */
    className: PropTypes.string,
    /** specify the current value of the control */
    value: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.object
    ]),
    /** Subscribe to change events */
    onChange: PropTypes.func,
    /** Specify the options the user can select from */
    options: PropTypes.array.isRequired,
    /** Allow the user to search for matching options */
    searchable: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.number
    ]),
    /** Allow user to clear icon to hide */
    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,
    /** Control the value of the search input */
    inputValue: PropTypes.string,
    /** Control the value of the search input */
    onInputChange: PropTypes.func,
    /** Provides functionality to filter the data from start/in-between */
    matchPos: PropTypes.string,
    /** Specify the which dropdown to use */
    selectedDropdown: PropTypes.oneOf(['normalDropdown', 'iconDropdown', 'dividerDropdown', 'autosuggestDropdown']),
    /**  Unique ID for the field */
    id: PropTypes.string,
    /**  Specify user to select Single Autosuggest icon dropdown for small fields (Country Code) or large fileds(Country Search) */
    isSingleAutosuggestDropdownWithIcon: PropTypes.bool,
    /**  Specify user to select Single Autosuggest icon dropdown with arrow or without arrow */
    isSingleAutosuggestDropdownWithArrow: PropTypes.bool,
    /** option to specify sort either by alphabet or number */
    isSortByAlphabet: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.number
    ])
};