import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Card, { CardActions, CardContent } from 'material-ui/Card';
import Typography from 'material-ui/Typography';
import TextField from 'material-ui/TextField';
import Button from 'material-ui/Button';


/*
 * EntryEditor is designed for use in EntryCreator (POST) and EntryWidget (PATCH).
 * It has a fixed date based on either the entry being edited (PATCH) or
 * the DatePicker's current date (POST). For POST, the category is required
 * and modifiable. For PATCH, the category is fixed. Rating and Entry are
 * modifiable in both methods.
*/


class EntryEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      entry: props.entry,
      rating: props.rating,
      category: props.category,
      saveBtnDisabled: true,
      categoryError: false,
      entryError: false,
      categoryHelperText: "",
      entryHelperText: ""
    };

    this.handleChange = this.handleChange.bind(this);
    this.routeSave = this.routeSave.bind(this);
    this.handleError = this.handleError.bind(this);
  }

  /*
   * Partially applied method.
   * @param field [string]: the state's key to target.
   * @return [func]: the change handler.
  */
  handleChange(field) {
    return (e) => {
      this.setState({
        [field]: e.target.value
      });
      if (field !== "category") {
        let saveBtnDisabled = e.target.value === this.props[field] ? true : false;
        this.setState({
          saveBtnDisabled: saveBtnDisabled
        });
      }
    };
  }

  /*
   * Used as a callback in the handleSave method.
   * Called in case of 400 response in DailyView.
  */
  handleError(error) {
    let data = error.response.data;
    let categoryErrorMsg = data["category"]
    let entryErrorMsg = data["entry"]
    if (categoryErrorMsg) {
      this.setState({
        categoryError: true,
        categoryHelperText: categoryErrorMsg
      });
    }
    // Not reachable by the average user.
    if (entryErrorMsg) {
      this.setState({
        entryError: true,
        entryHelperText: entryErrorMsg
      });
    }
  }

  // Not sure how else to do this.
  routeSave(e) {
    if (this.props.url) {
      this.props.handleSave(e, this.props.url, this.state.rating, this.state.entry, this.props.handleCancel, this.handleError);
    } else {
      this.props.handleSave(e, this.props.date, this.state.category, this.state.rating, this.state.entry, this.props.handleCancel, this.handleError);
    }
  }

  render() {
    let categoryElement = null;
    // category UI either fixed text (PATCH) or a select widget (POST)
    if (this.props.category) {
      categoryElement = <Typography variant="headline">{this.props.category}</Typography>
    } else {
      categoryElement = (
        <TextField
          id="select-category"
          select
          label="Category"
          value={this.state.category}
          onChange={this.handleChange("category")}
          SelectProps={{
            native: true,
          }}
          error={this.state.categoryError}
          helperText={this.state.categoryHelperText}
          margin="normal"
        >
          <option key={"0"} value={""} />
          {this.props.categories.map(category => (
            <option key={category.pk} value={category.pk}>
              {category.category}
            </option>
          ))}
        </TextField>
      )
    }
    return (
      <Card>
        <CardContent>
          <Typography align="right" color="textSecondary">{this.props.date}</Typography>
          {categoryElement}
          <TextField
            id="select-rating"
            select
            label="Rating"
            value={this.state.rating}
            onChange={this.handleChange("rating")}
            SelectProps={{
              native: true,
            }}
            helperText=""
            margin="normal"
          >
            {this.props.qualityRatings.map(rating => (
              <option key={rating} value={rating}>
                {rating}
              </option>
            ))}
          </TextField>
          <TextField
            id="entryField"
            label="Entry"
            multiline
            fullWidth={true}
            inputProps={{
              maxLength: 5000
            }}
            value={this.state.entry}
            onChange={this.handleChange("entry")}
            error={this.state.entryError}
            helperText={this.state.entryHelperText}
            margin="normal"
          />
        </CardContent>
        <CardActions>
          <Button onClick={this.routeSave} disabled={this.state.saveBtnDisabled}>
            {"Save"}
          </Button>
          <Button onClick={this.props.handleCancel}>{"Cancel"}</Button>
        </CardActions>
      </Card>
    )
  }
}

EntryEditor.propTypes = {
  date: PropTypes.string.isRequired,
  qualityRatings: PropTypes.array.isRequired,
  handleSave: PropTypes.func.isRequired,
  // from parent component. Will just toggle the state of said parent.
  handleCancel: PropTypes.func.isRequired,
  // EntryUpdater only
  url: PropTypes.string,
  category: PropTypes.string,
  rating: PropTypes.string,
  entry: PropTypes.string,
  // EntryCreator only
  categories: PropTypes.array
}

EntryEditor.defaultProps = {
  url: "",
  category: "",
  rating: "OK",
  entry: ""
}

export default EntryEditor;

@@ -69,16 +69,66 @@
 types';%0A
+import %7B withStyles %7D from 'material-ui/styles';%0A%0A
 import C
@@ -182,24 +182,24 @@
 l-ui/Card';%0A
-
 import Typog
@@ -670,16 +670,165 @@
 s.%0A*/%0A%0A%0A
+const styles = theme =%3E (%7B%0A  textField: %7B%0A    // marginLeft: theme.spacing.unit,%0A    marginRight: 2 * theme.spacing.unit,%0A    width: 150,%0A  %7D,%0A%7D);%0A%0A%0A
 class En
@@ -3077,32 +3077,83 @@
 abel=%22Category%22%0A
+          className=%7Bthis.props.classes.textField%7D%0A
           value=
@@ -5624,16 +5624,35 @@
 default 
+withStyles(styles)(
 EntryEdi
@@ -5654,10 +5654,11 @@
 ryEditor
+)
 ;%0A

Revert "Revert "added EntryEditor styles""