import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import DetailSection from './DetailSection';
import DetailEdit from './DetailEdit';
import { editDetail } from './../../actions';

import Grid from '@material-ui/core/Grid';


class Detail extends React.Component {
  constructor(props){
    super(props);
    this.dispatch = this.props.dispatch;
    this.student = this.props.student;
    this.studentId = this.props.studentId;

    this.state = {
      updating : {
        bio: {
          updating: false,
          content: this.student.bio
        },
        techInterests: {
          updating: false,
          content: this.student.techInterests
        },
        notes: {
          updating: false,
          content: this.student.notes
        },
        redFlagNotes: {
          updating: false,
          content: this.student.redFlags[0].details
        }
      }
    };
    this.handleFormSubmit=this.handleFormSubmit.bind(this);
    this.toggleForm=this.toggleForm.bind(this);
  }

  handleFormSubmit(section, content) {
    this.dispatch(editDetail(section, content, this.studentId));
    this.toggleForm(section, content);
  }

  toggleForm(section, content) {
    let visible=!this.state.updating[section].updating;
    const sectionUpdated = { ...this.state.updating[section], updating: visible, content: content};
    const updating = { ...this.state.updating, [section]: sectionUpdated };
    this.setState({
      updating
    });
  }

  render(){
    return (
      <Grid item container>
        {Object.keys(this.state.updating).map((component, i) => {
          const ComponentName = this.state.updating[component].updating ? DetailEdit : DetailSection;
          return (
            <Grid item key={i}>
              <ComponentName
                componentName={component}
                content={this.state.updating[component].content}
                onButtonClick={this.handleFormSubmit}
                studentId={this.studentId}
              />
            </Grid>
          );
        })}
      </Grid>
    );
  }
}

Detail.propTypes = {
  studentId: PropTypes.string,
  student: PropTypes.object,
  dispatch: PropTypes.func
};

// export default connect()(Detail);
export default connect()(Detail);