import React, { Component, PropTypes } from 'react';
import { Paper, AutoComplete } from 'material-ui';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Spacing from 'material-ui/styles/spacing';
// import Pagelet from '../Pagelet/Pagelet';
import UCdefaultTheme from '../../themes/DefaultTheme';
/**
 *
 */
export default class SearchBar extends Component {
  getChildContext() {
    const theme = getMuiTheme(UCdefaultTheme);
    theme.appBar.textColor = 'white';
    theme.appBar.spacing = Spacing.desktopSubheaderHeight;
    return {
      muiTheme: theme,
    };
  }

  render() {
    const filter = (searchText, key) => (
      key.toLowerCase().indexOf(searchText.toLowerCase()) !== -1
    );
    return (
      <div>
        <div style={{ padding: '5px' }}>
          <AutoComplete
            floatingLabelText="Search"
            fullWidth
            name="query"
            dataSource={this.props.dataSource}
            filter={filter}
          />
        </div>
      </div>
    );
  }
}

SearchBar.childContextTypes = {
  muiTheme: PropTypes.object,
};