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, //'5a8156f1abdff8001a01369e',
        directions,
        //'*) Hovězí maso omyjeme a naložíme do Hamé Halali zeleninové směsi, maso musí být ve směsi ponořené, pokud není, dolijeme studenou vodou (_naložené maso necháme v lednici 1 až 3 dny_)\n*) Poté maso vložíme i se směsí do pekáčku, přikryjeme a pečeme na 200 °C po dobu 2,5 - 3 hodiny\n*) Upečené maso vyjmeme z pekáčku, nakrájíme na plátky a necháme stranou\n*) Polovinu směsi rozmixujeme tyčovým mixérem a druhou polovinu propasírujeme\n*) Přivedeme k varu\n*) Ve smetaně a mléku mezitím rozmícháme cca 6 lžic hladké mouky a 3 lžíce cukru\n*) Pomalu přilijeme do omáčky, důkladně promícháme a necháme přejít varem\n*) Dochutíme cukrem a citronovou šťávou\n\n_Nesmí chybět brusinky!_',
        if(sideDish){sideDish},//: 'karlovarský knedlík',
        preparationTime,//: 180,
        servingCount,//: 10,
        title,//: 'Svíčková na smetaně',
        slug,//: 'svickova-na-smetane',
        //__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;