import React from 'react';
import { connect } from 'react-redux';
import { browserHistory } from 'react-router';
import { recosActions } from '../../core/recos';
import { getRecommenders, getReco } from '../../core/recos';
import { isEditing } from '../../core/loading';

import Header from '../Header';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import { Card, CardText } from 'material-ui/Card';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import FlatButton from 'material-ui/FlatButton';
import AutoComplete from 'material-ui/AutoComplete';
import LoadingIndicator from '../../components/LoadingIndicator';
import CategorySelector from '../../components/CategorySelector';

const blockStyle = {
  display: 'block'
}

class EditReco extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) 


  handleNameChange(event) {
    this.setState({ name: event.target.value });
  }

  handleRecommenderChange(value) {
    this.setState({ recommender: value });
  }

  handleCategoryChange(newCategory) {
      if(this.state.category === newCategory) {
          newCategory = null;
      }
      this.setState({ category: newCategory });
  }

  saveButtonClicked() {
    this.dispatchSaveButtonClicked(this.state.key, {
        name: this.state.name,
        recommender: this.state.recommender,
        category: this.state.category,
    });
  }

  closeButtonClicked() {
    browserHistory.goBack();
  }

  getHeaderSaveButton() {
    if(this.state.name) {
      return <FlatButton label="Save" />;
    } else {
      return null;
    }
  }

  render() {
    if(this.props.isLoading) {
      return <LoadingIndicator />;
    }
    return (
      <div>
        <Header
          title={'Edit Reco'}
          iconElementLeft={<IconButton><NavigationClose /></IconButton>}
          onLeftIconButtonTouchTap={this.closeButtonClicked}
          />
        <Card>
          <CardText>
            <TextField
              hintText={'Recommendation name'}
              style={blockStyle}
              type='text'
              value={this.state.name}
              onChange={this.handleNameChange}
            />
            <AutoComplete
              hintText='Who recommended it?'
              searchText={this.state.recommender}
              dataSource={this.recommenders}
              onUpdateInput={this.handleRecommenderChange}
              onNewRequest={this.handleRecommenderChange}
              style={blockStyle}
              filter={AutoComplete.fuzzyFilter}
              maxSearchResults={5}
            />
            <CategorySelector
                value={this.state.category}
                onChange={this.handleCategoryChange}/>
            <RaisedButton
              label={'Save'}
              style={blockStyle}
              primary={true}
              onClick={this.saveButtonClicked}
              disabled={!this.state.name} />
          </CardText>
        </Card>
      </div>
    );
  }
}

const mapStateToProps = (state, { params }) => {
  return {
    recommenders: getRecommenders(state).map( reco => reco.name),
    reco: getReco(state, params.recoId),
    isLoading: isEditing(state)
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    dispatchSaveButtonClicked: (id, reco) => {
      dispatch(recosActions.editReco(id, reco))
        .then(() => {
          browserHistory.goBack();
        });
    }
  };
};

const EditRecoContainer = connect(mapStateToProps, mapDispatchToProps)(EditReco);

export default EditRecoContainer;

{
    super();
    this.state = {
      ...props.reco
    };
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleRecommenderChange = this.handleRecommenderChange.bind(this);
    this.handleCategoryChange = this.handleCategoryChange.bind(this);
    this.saveButtonClicked = this.saveButtonClicked.bind(this);
    this.dispatchSaveButtonClicked = props.dispatchSaveButtonClicked; //Probably there is a better way to have evrything being into this.
    this.recommenders = props.recommenders;
    this.props = props;
  }