import React from 'react';
import Autocomplete from 'react-autocomplete';

class Search extends React.Component { //create Search component

    handleRenderItem(item, isHighlighted){
        const listStyle = {
            item: {
                padding: '2px 6px',
                cursor: 'default'
            },
            highlightedItem: {
                color: 'white',
                background: '#F38B72',
                padding: '2px 6px',
                cursor: 'default'
            }
        };

        return (
            <div
                style={isHighlighted ? listStyle.highlightedItem : listStyle.item}
                key = {item.id}
                id = {item.id}
            >{item.title}</div>
        )
    }
    render(){
        return(
            <div className="search">
                <Autocomplete
                    ref="autocomplete"
                    inputProps = {{title:"Title"}}
                    value = {this.props.autoCompleteValue}
                    items={this.props.tracks}
                    getItemValue={(item) => item.title}
                    onSelect={this.props.handleSelect}
                    onChange={this.props.handleChange}
                    renderItem={this.handleRenderItem.bind(this)}
                />
            </div>
        );
    }
}

export default Search //export component Search
