import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { tutorialTitle, changeContent, setError, deleteError } from '../../../actions/tutorialBuilderActions';

import { withStyles } from '@material-ui/core/styles';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';

const styles = theme => ({
  multiline: {
    padding: '18.5px 14px 18.5px 24px'
  },
  errorColor: {
    color: theme.palette.error.dark
  }
});

class Textfield extends Component {

  handleChange = (e) => {
    var value = e.target.value;
    if(this.props.property === 'title'){
      this.props.tutorialTitle(value);
    }
    else {
      this.props.changeContent(this.props.index, this.props.property, value);
    }
    if(value.replace(/\s/g,'') === ''){
      this.props.setError(this.props.index, this.props.property);
    }
    else{
      this.props.deleteError(this.props.index, this.props.property);
    }
  };

  render() {
    return (
      <FormControl variant="outlined" fullWidth style={{marginBottom: '10px'}}>
        <InputLabel htmlFor={this.props.property}>{this.props.label}</InputLabel>
        <OutlinedInput
          style={{borderRadius: '25px'}}
          classes={{multiline: this.props.classes.multiline}}
          error={this.props.index !== undefined ? this.props.error.steps[this.props.index][this.props.property] : this.props.error[this.props.property]}
          value={this.props.value}
          label={this.props.label}
          id={this.props.property}
          multiline={this.props.multiline}
          rows={2}
          rowsMax={10}
          onChange={(e) => this.handleChange(e)}
        />
        {this.props.index !== undefined ?
          this.props.error.steps[this.props.index][this.props.property] ? <FormHelperText className={this.props.classes.errorColor}>{this.props.errorText}</FormHelperText>
        : null
        : this.props.error[this.props.property] ? <FormHelperText className={this.props.classes.errorColor}>Gib einen Titel für das Tutorial ein.</FormHelperText>
        : null}
      </FormControl>
    );
  };
}

Textfield.propTypes = {
  tutorialTitle: PropTypes.func.isRequired,
  changeContent: PropTypes.func.isRequired,
  error: PropTypes.object.isRequired,
  change: PropTypes.number.isRequired
};

const mapStateToProps = state => ({
  error: state.builder.error,
  change: state.builder.change
});

export default connect(mapStateToProps, { tutorialTitle, changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(Textfield));