import React from 'react';
import ExerciseCard from '../ExerciseCard/ExerciseCard';
import AddEditExerciseFormContainer from '../AddEditExerciseFormContainer/AddEditExerciseFormContainer';
import AddButton from '../AddButton/AddButton';
import AuthService from '../../services/auth.service';
import UserService from '../../services/users.service';
import DateService from '../../services/date.service';
import 'whatwg-fetch';

require('./ExerciseCardContainer.scss');

export default class ExerciseCardContainer extends React.Component {

  constructor() {
    super();
    this.handleOnEdit = this.handleOnEdit.bind(this);
    this.handleOnDelete = this.handleOnDelete.bind(this);
    this.handleOnBlur = this.handleOnBlur.bind(this);
    this.renderExercises = this.renderExercises.bind(this);
    this.state = {
      showExerciseEdit: false,
      dailyExercises: [],
      selectedExercise: {
        name: '',
        set: 0,
        reps: 0,
        weight: 0,
      },
    };
  }

  componentDidMount() {
    AuthService.getCurrentlySignedInUser((user) => {
      UserService.getExercises(user.uid, this.props.params.day, (exercises) => {
        const dailyExercisesArray = [];
        Object.keys(exercises).forEach((ex) => {
          const exerciseObject = Object.assign({}, exercises[ex], { key: ex });
          dailyExercisesArray.push(exerciseObject);
        });
        this.setState({
          dailyExercises: dailyExercisesArray,
        });
      });
    });
  }

  handleOnEdit(exerciseDetails) {
    this.setState({
      showExerciseEdit: !this.state.showExerciseEdit,
      selectedExercise: exerciseDetails,
      // selectedExercise: {
      //   name: exerciseDetails.name,
      //   set: exerciseDetails.set,
      //   reps: exerciseDetails.reps,
      //   weight: exerciseDetails.weight,
      // },
    });
  }

  handleOnDelete(exerciseDetails) {
    AuthService.getCurrentlySignedInUser((user) => {
      const paths = window.location.hash.split('/');
      const day = paths[paths.length - 1];
      const key = exerciseDetails.details.key;
      UserService.deleteExercise(user.uid, day, key);
    });
  }

  handleOnBlur(open) {
    if (open === false) {
      this.setState({
        showExerciseEdit: false,
      });
    }
  }

  renderExercises() {
    return this.state.dailyExercises.map((ex) => {
      return (
        <div>
          <ExerciseCard
            details={ex}
            onEdit={this.handleOnEdit}
            onDelete={this.handleOnDelete}
          />
        </div>
      );
    });
  }

  render() {
    const exercises = this.renderExercises();
    return (
      <div>
        {exercises}
        {this.state.showExerciseEdit ?
          <AddEditExerciseFormContainer
            onBlur={this.handleOnBlur}
            selectedExercise={this.state.selectedExercise}
          /> :
          null
        }
        <AddButton onClick={this.handleOnEdit} />
      </div>

    );
  }
}

ExerciseCardContainer.defaultProps = {
};

ExerciseCardContainer.propTypes = {
};
/*

 */

@@ -721,32 +721,84 @@
 lur.bind(this);%0A
+    this.handleOnAdd = this.handleOnAdd.bind(this);%0A
     this.renderE
@@ -955,69 +955,19 @@
     
-name: '',%0A        set: 0,%0A        reps: 0,%0A        weight: 0,
+details: %7B%7D
 %0A   
@@ -2251,25 +2251,168 @@
 ,%0A      
-%7D);%0A    %7D
+  selectedExercise: %7B%0A          details: %7B%7D,%0A        %7D,%0A      %7D);%0A    %7D%0A  %7D%0A%0A  handleOnAdd() %7B%0A    this.setState(%7B%0A      showExerciseEdit: true,%0A    %7D);
 %0A  %7D%0A%0A  
@@ -3054,20 +3054,19 @@
 handleOn
-Edit
+Add
 %7D /%3E%0A   

Add button pops up empty form