import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';
import { FormControl } from 'react-bootstrap';

import api from '../../api';

class RecipeDetialEdit extends Component {
  constructor(props) {
    super(props);

    this.state = {
      directionsEdit: '',
      title: '',
    };
    this.handleTextChange = this.handleTextChange.bind(this);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.recipeDetailData !== this.props.recipeDetailData) {
      this.setState({
        directionsEdit: this.props.recipeDetailData.directions,
        title: this.props.recipeDetailData.title,
      });
      //console.log(this.props.recipeDetailData.directions);
    }
  }

  handleTextChange(event) {
    this.setState({
      directionsEdit: event.target.value,
    });
  }

  handleTitleChange(event) {
    this.setState({
      title: event.target.value,
    });
  }

  saveForm(directions, title, preparationTime, servingCount, slug, _id, sideDish) {
    console.log(_id);
    api
      .post('/recipes/5a8156f1abdff8001a01369e', {
        _id,
        directions,
        if(sideDish){sideDish},
        preparationTime,
        servingCount,
        title,
        slug,
        //__v: 0,
      })
      //`/if(slug){window.location.href=`/recipe/${slug}`;}
      //.then(
        //response => {if(slug){console.log(slug)};}
      //);
      //if(slug){window.location.href=`/recipe/${slug}`}
  }

  renderSideDish() {
    const { recipeDetailData } = this.props;
    const { sideDish } = recipeDetailData;

    return (
      sideDish && (
        <span>
          <i className="fa fa-cutlery" /> Side Dish {sideDish}
        </span>
      )
    );
  }

  render() {
    const { directionsEdit } = this.state;
    const { isLoading, recipeDetailData } = this.props;
    const { title, preparationTime, directions, servingCount, slug, _id, sideDish } =
      recipeDetailData || {};

    if (isLoading) {
      return <div> Loading ...</div>;
    }

    return (
      <div className="row">
        <input
          type="text"
          value={this.state.title}
          onChange={this.handleTitleChange}
        />
        <div>
          <span>
            <i className="fa fa-clock-o" />Preparation Time: {preparationTime}{' '}
            min
          </span>{' '}
          {this.renderSideDish()} {''}
          <span>
            <i className="fa fa-rocket" />Serving counts: {servingCount}
          </span>
        </div>
        <div>
          <FormControl
            componentClass="textarea"
            value={this.state.directionsEdit}
            onChange={this.handleTextChange}
            style={{ height: '250px' }}
          />
        </div>
        <button onClick={this.saveForm(directionsEdit, title, preparationTime, servingCount, slug, _id, sideDish)}>Save</button>
      </div>
    );
  }
}

RecipeDetialEdit.propTypes = {
  isLoading: PropTypes.bool.isRequired,
  RecipeDetailData: PropTypes.object,
};

export default RecipeDetialEdit;