import React, { Component, PropTypes } from 'react';
import { SelectField, MenuItem } from 'material-ui';

export default class TermFilter extends Component {
  constructor(props) {
    super(props);
    this.renderTermBar = this.renderTermBar.bind(this);
    this.handleTermChange = (event, index, value) => this.setState({value});
    this.state = {
      value: 0,
      };
  }

  handleChange = (event, index, value) => this.setState({value});

  renderTermBar (type, terms) {
    let dropdownValue = 1;
    function EmptyTitle(){
      return <br/>;
    }
    function TermTitle(){
      let title = terms.map((item)=>item.termName);
      return <br/>;
    }
    function TermFilter(terms){
      let filterItems = terms.map((item)=><MenuItem value={dropdownValue++} primaryText={item.name}/>);
      return (
        <SelectField value={0} labelStyle={{color:'white'}} style={{width:'150px'}}>
          <MenuItem value={0} primaryText='All terms'/>
          {filterItems}
        </SelectField>
      );
    }

    var bar = {
      0: EmptyTitle(),
      1: TermTitle(),
      'default':TermFilter(terms),
    };
    return (bar[type] || bar['default']);
  }

  render() {
    const { terms } = this.props;
    let filter = this.renderTermBar(terms.length, terms)
    return (
      <div className="selectWrapper">
      {filter}
      </div>
    );
  }
}
TermFilter.propTypes = {
  terms:PropTypes.array,
};

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