import React, { Component } from 'react';
import Autocomplete from 'react-autocomplete';
import PropTypes from 'prop-types';
import { CrossIcon } from '../../atom/CrossIcon/CrossIcon';
import { ModalPopUp } from '../../atom/ModalPopUp/ModalPopUp';

/**
 * A statefull component of Mobile to create Autocomplete Mobile Dropdown Label atom.  
 */

class AutocompleteMobiledropdownlabel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };
    }
    select = (value) => {
        this.setState({ value });
        this.props.onCrossIcon(value);
    }
    crossIconSetValue = () => {
        let count = 0;
        if (this.state.value !== '') {
            this.props.suggestions.forEach((fact) => {
                if (fact.label.toLowerCase() === this.state.value.toLowerCase()) {
                    count = count + 1;
                }
            });
            if (count === 1) {
                this.props.onCrossIcon(this.state.value);
            } else {
                this.props.onCrossIcon('');
            }
        } else {
            this.props.onCrossIcon('');
        }
    }
    renderItem = (item, highlighted) => {
        if (this.props.isPopup === true) {
            return (
                <div className='jp-mobile-autocomplete-without-icon-arrow-container'
                    key={item.id}
                    style={{ backgroundColor: highlighted ? '#eee' : 'transparent' }}
                >
                    <div><span className='jp-state-left'>{item.label}</span><span className='jp-state-right'>{item.value}</span></div>
                </div>
            );
        } else {
            return (
                <div
                    className='jp-mobile-autocomplete-different-pattern-container'
                    key={item.id}
                    style={{ backgroundColor: highlighted ? '#eee' : 'transparent' }}
                >
                    <div><span className='jp-city-left'>{item.label}</span></div>
                    <div><span className='jp-state-left'>{item.value}</span>,<span className='jp-state-left'>{item.region}</span>{' '}<span className='jp-state-right'>villa</span></div>
                </div>
            );
        }
    };

    render() {
        return (
            <ModalPopUp
                childClassName={this.props.isPopup ? 'jp-mobile-autocomplete-modalpopup-without-icon ' : 'jp-mobile-autocomplete-modalpopup-different-pattern'}
                isOpen={this.props.isSearchModalOpen}
                onRequestClose={this.props.closeMobileModalSearch}
            >
                <div className={this.props.isPopup ? 'jp-mobile-autocomplete-without-icon-container' : 'jp-mobile-autocomplete-different-pattern-container'}>
                    <div className='jp-mobile-autocomplete-crossicon'>
                        <div className='crossiconsearch'>
                            <CrossIcon onClick={this.crossIconSetValue.bind(this)} />
                        </div>
                    </div>
                    <div>
                        <div className='inputlabel'>
                            <span>{this.props.searchLabel}</span>
                        </div>
                        <div className={'input-block ' + this.props.parentClassName}>
                            <Autocomplete
                                {...this.props}
                                wrapperProps={{
                                    className: 'jp-input-autocomplete'
                                }}

                                shouldItemRender={(item, value) => item.label.toLowerCase().startsWith(value.toLowerCase())}
                                getItemValue={item => item.label}
                                items={this.props.suggestions}
                                renderItem={this.renderItem}
                                value={this.state.value}
                                onChange={e => this.setState({ value: e.target.value })}
                                onSelect={this.select.bind(this)}
                                renderMenu={(item) => (
                                    <div className="menu" style={{ overflow: 'auto' }}>
                                        {
                                            item.length === 0 ? (
                                                <div className='jp-notfoundimg'>
                                                    <div className="item"><img src={this.props.imgNoResultFound} alt='' /></div>
                                                    <div className="jp-nofound"><span>No matching result found</span></div>
                                                </div>
                                            ) : item}
                                    </div>
                                )}

                            />
                        </div>
                    </div>
                </div>
            </ModalPopUp>
        );
    }
}
export default AutocompleteMobiledropdownlabel;

AutocompleteMobiledropdownlabel.defaultProps = {
    /** Class applied to parent container for additional styling  */
    parentClassName: ''
};

AutocompleteMobiledropdownlabel.propTypes = {
    /** function for values in input box */
    getItemValue: PropTypes.func,
    /** list of options */
    items: PropTypes.oneOfType([
        PropTypes.array,
        PropTypes.object,
        PropTypes.string
    ]),
    /** to render each item from result */
    renderItem: PropTypes.func,
    /** onChange value */
    onChange: PropTypes.func,
    /** onSelect value */
    onSelect: PropTypes.func,
    /** flag to show modal or not */
    isSearchModalOpen: PropTypes.bool,
    /** flag to show without icon without arrow or different label */
    isPopup: PropTypes.bool,
    /** Object which stores Location values coming from API call */
    suggestions: PropTypes.oneOfType([
        PropTypes.array,
        PropTypes.object,
        PropTypes.string
    ]),
    /** Function to be get called on click of Cross Icon */
    onCrossIcon: PropTypes.func,
    /** Function to be get called on select value */
    closeMobileModalSearch: PropTypes.func,
    /** Label for search box */
    searchLabel: PropTypes.string,
    /** Class applied to parent container for additional styling  */
    parentClassName: PropTypes.string,
    /** get src of image for not match found */
    imgNoResultFound: PropTypes.string
};