import React, { Component } from 'react';
import Autocomplete from 'react-autocomplete';
import PropTypes from 'prop-types';
import { format } from 'date-fns';
// import locationImage from '../../style/img/location.png';

/** 
 * A Component for autosuggest for Search Flyout.
 * Autosuggest provide the feature:As user types, the list appears with matching options 
*/

class DesktopSearchFlyout extends Component {

    getItemValue = (item) => {
        const isRecentlySearchedLocation = this.props.isRecentlySearchedLocation;
        return isRecentlySearchedLocation ? ` ${item.location}` : `${item.label}`;
    }

    renderItem = (item, isHighlighted) => {

        const isHomePage = this.props.isHomePage;
        const isRecentlySearchedLocation = this.props.isRecentlySearchedLocation;
        const value = this.props.searchFlyoutValue.toLowerCase();

        let recentlySearchHeader = this.props.recentlySearchHeader;
        let isRecentlySearch = this.props.isRecentlySearch;
        recentlySearchHeader = isRecentlySearch ? this.props.recentlySearchHeaderText : (isRecentlySearch !== null ? this.props.nearByHeaderText : '');
        let txt = item.label !== undefined ? item.label : item.location;
        let idx = txt.toLowerCase().indexOf(value);
        let newText = [txt.substring(0, idx), <strong key={item.label !== undefined ? item.label : item.location} className='jp-highlightText'>{txt.substring(idx, idx + value.length)}</strong>, txt.substring(idx + value.length)];

        return (
            <div key={item.label !== undefined ? item.label : item.location}>
                <h6 >{recentlySearchHeader}</h6>
                <div title={isRecentlySearchedLocation ? item.location + ' | ' + format(item.dateRange, 'Do MMM YYYY - Do MMM YYYY') + ' | ' + item.roomConfig + ' ' + item.paxConfig : item.label + ' ' + item.properties}>
                    {isRecentlySearchedLocation ?
                        (<li id={isHighlighted ? 'selectedoption' : ''} role="option" data-activedescendant={isHighlighted ? true : false} aria-selected={isHighlighted ? true : false} aria-label={item.location ? item.location : item.label} className={!isHomePage ? 'group-location' : 'group-location-inner'} style={{ background: isHighlighted ? 'rgba(248, 244, 244, 0.68)' : 'white' }}>
                            <div className='location-div'><img src={this.props.locationImage} alt='' /><span className='location' >{item.location ? item.location : item.label}</span><span className='location'>{this.props.isRecentlySearchedLocation && !this.props.isHomePage ? '' : ' | '}</span></div>
                            <div className='jp-date-range'>{item.dateRange !== undefined ? format(item.dateRange, 'Do MMM YYYY - Do MMM YYYY') : '14th Apr 2019 - 16th Apr 2019'}</div>
                            <div className='jp-pax-config'><span className='room-title'>{item.roomConfig !== undefined ? item.roomConfig : '1 Room :'}</span> <span className='adult-title'>{item.paxConfig !== undefined ? item.paxConfig : '1 Adult 1 Child'}</span></div>
                        </li>) :
                        <li id={isHighlighted ? 'selectedoption' : ''} role="option" data-activedescendant={isHighlighted ? true : false} aria-selected={isHighlighted ? true : false} aria-label={item.label} className={!isHomePage ? 'jp-suggested-data-inner' : 'jp-suggested-data-select'} style={{ background: isHighlighted ? 'rgba(248, 244, 244, 0.68)' : 'white' }}>
                            <div className='jp-country' aria-atomic='true'><img src={this.props.locationImage} alt='' />{newText}</div>
                            <div className='jp-properties'>{item.properties !== undefined ? item.properties : '45 Properties'}</div>
                        </li>
                    }
                </div>
            </div>
        );
    };

    render() {

        let items = this.props.searchFlyoutValue.trim().length <= this.props.minLocationSerchLength && this.props.localValue.length !== 0 ? this.props.localValue : (this.props.searchFlyoutValue.trim().length > this.props.minLocationSerchLength ? this.props.suggestions : []);

        return (
            <div onFocus={this.props.onBlurInput} className={!this.props.isHomePage ? 'jp-desktop-search-flyout-container ' : 'jp-desktop-suggested-flyout-container ' + this.props.parentClassName}>
                <Autocomplete
                    {...this.props}
                    getItemValue={this.getItemValue}
                    items={items}
                    renderItem={this.renderItem}
                    value={this.props.searchFlyoutValue}
                    localValue={this.props.localValue}
                    onChange={this.props.onChange}
                    onSelect={this.props.onSelect}
                    onMenuVisibilityChange={this.props.onMenuVisibilityChange}
                    recentlySearchHeaderText={this.props.recentlySearchHeaderText}
                    nearByHeaderText={this.props.nearByHeaderText}
                    isRecentlySearch={this.props.isRecentlySearch}
                    renderMenu={children => (
                        <div>
                            <div htmlFor="ex1-input" id="ex1-label" />
                            <ul role="listbox" id="ex1-listbox" aria-labelledby="ex1-label" className={!(this.props.isHomePage) ? 'jp-desktop-recently-searched' : this.props.isRecentlySearchedLocation ? 'jp-desktop-recently-inner' : this.props.isRecentlySearchedLocation ? 'jp-desktop-suggested-inner' : 'jp-desktop-suggested-locations'}>
                                <div className='jp-suggested-data'>{children}</div>
                            </ul>
                        </div>)}
                    inputProps={{
                        tabIndex: 0,
                        'aria-label': 'destination/location',
                        'aria-controls': 'ex1-listbox',
                        'id': 'ex1-input',
                        'aria-owns': 'ex1-listbox',
                        'aria-haspopup': 'listbox',
                        'aria-activedescendant': 'selectedoption',

                        onBlur: this.props.onBlurInput,
                        className: this.props.isNewClass ? (this.props.isHomePage ? 'jp-home-input' : 'jp-input') : null
                    }}
                />
            </div>
        );
    }
}
export default DesktopSearchFlyout;

DesktopSearchFlyout.defaultProps = {
    searchFlyoutValue: '',
    isHomePage: true,
    parentClassName: ''
};

DesktopSearchFlyout.propTypes = {
    /** function for values in input box */
    getItemValue: PropTypes.func,
    /** list of options */
    items: PropTypes.oneOfType([
        PropTypes.array,
        PropTypes.object
    ]),
    /** function to be get only when user selects value from dropdown */
    onBlurInput: PropTypes.func,
    /** flag to be get only when user selects value from dropdown */
    isNewClass: PropTypes.bool,
    /** user entered and selected value */
    searchFlyoutValue: PropTypes.string,
    /** onChange value */
    onChange: PropTypes.func,
    /** onSelect value */
    onSelect: PropTypes.func,
    /** on focus menu visibility */
    onMenuVisibilityChange: PropTypes.func,
    /** flag for header */
    recentlySearchHeader: PropTypes.string,
    /** flag for result either recently or suggested locations */
    isRecentlySearchedLocation: PropTypes.bool,
    /** on blur value get automatically selected */
    selectOnBlur: PropTypes.bool,
    /** Recently Search Header Text */
    recentlySearchHeaderText: PropTypes.string,
    /** NearBy Location Header Text */
    nearByHeaderText: PropTypes.string,
    /** flag for header selection */
    isRecentlySearch: PropTypes.bool,
    /** Object which stores Location values in LocalStorage */
    localValue: PropTypes.oneOfType([
        PropTypes.array,
        PropTypes.object
    ]),
    /** Object which stores Location values coming from API call */
    suggestions: PropTypes.PropTypes.oneOfType([
        PropTypes.array,
        PropTypes.object
    ]),
    /** minimum length to display Location list in API call */
    minLocationSerchLength: PropTypes.number,
    /** flag to decide which flyout to render */
    isHomePage: PropTypes.bool,
    /** Class applied to parent container for additional styling  */
    parentClassName: PropTypes.string,
    /** location image path  */
    locationImage:PropTypes.string
};