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

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

class MobileSearchFlyout extends Component {

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

    renderItem = (item) => {

        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>
                {isRecentlySearchedLocation ?
                    (<div className='group-location'>
                        <div className='location-div'><img src={this.props.locationImage} alt="" /><span className='location' title={item.location ? item.location : item.label}>{item.location ? item.location : item.label}</span><span className='location'>{this.props.isRecentlySearchedLocation ? '' : ' | '}</span></div>
                        <div className='jp-date-range'>{item.dateRange !== undefined ? format(item.dateRange, 'Do MMM YYYY') : '14th Apr 2019 - 16th Apr 2019'} - {item.endDate !== undefined ? format(item.endDate, '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>
                    </div>) :
                    <div className='jp-suggested-data-inner'>
                        <div className='jp-country'><img src={this.props.locationImage} alt="" />{newText}</div>
                        <div className='jp-properties'>{item.properties !== undefined ? item.properties : '45 Properties'}</div>
                    </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 (
            <ModalPopUp
                childClassName='jp-home-search-modalpopup'
                isOpen={this.props.isSearchModalOpen}
                onRequestClose={this.props.closeMobileModalSearch}
            >
                <div className={'jp-mobile-search-flyout-container ' + this.props.parentClassName}>
                    <div className='jp-search-flyout-crossicon'>
                        <div className='crossiconsearch'>
                            <CrossIcon onClick={this.props.onCrossIcon} />
                        </div>
                    </div>
                    <div>
                        <div className='inputlabel'>
                            <span>{this.props.searchLabel}</span>
                        </div>
                        <div className='input-block'>
                            <Autocomplete
                                {...this.props}
                                wrapperProps={{
                                    className: 'jp-input-autocomplete'
                                }}
                                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}
                                selectOnBlur={this.props.selectOnBlur}
                                recentlySearchHeaderText={this.props.recentlySearchHeaderText}
                                nearByHeaderText={this.props.nearByHeaderText}
                                isRecentlySearch={this.props.isRecentlySearch}
                                renderMenu={children => (
                                    <div className='jp-mobile-recently-searched'>
                                        <div className='jp-suggested-data'>{children}</div>
                                    </div>)}
                            />
                        </div>
                    </div>
                </div>
            </ModalPopUp>
        );
    }
}
export default MobileSearchFlyout;

MobileSearchFlyout.defaultProps = {
    /** Alternate text for the Mobile which is by default false */
    isMobileFlyout: true,
    /** Class applied to parent container for additional styling  */
    parentClassName: ''
};

MobileSearchFlyout.propTypes = {
    /** function for values in input box */
    getItemValue: PropTypes.func,
    /** list of options */
    items: PropTypes.oneOfType([
        PropTypes.array,
        PropTypes.object
    ]),
    /** to render each item from result */
    renderItem: PropTypes.func,
    /** 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,
    /** flag to show modal or not */
    isSearchModalOpen: 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 for Alternate text of the image  with or without bubble */
    isMobileFlyout: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.number
    ]),
    /** Function to be get called on click of Cross Icon */
    onCrossIcon: PropTypes.func,
    /** Function to be get called on click of back arrow */
    closeMobileModalSearch: PropTypes.func,
    /** Label for search box */
    searchLabel: PropTypes.string,
    /** Class applied to parent container for additional styling  */
    parentClassName:PropTypes.string,
    /** location image path  */
    locationImage:PropTypes.string
};