import React, { Component } from 'react';
import style from "./Displayer.css";

import client from "apollo-client"
import {graphql, Query} from "react-apollo";
import gql from "graphql-tag";

import equal  from 'deep-equal';

class Displayer extends Component {

    // some data
    backgroundUrl =  {
    foo
    }

    recipe; // declare the recipe variable in order to handle the reception on data ulteriously

    // my try to render the component immediatly
    shouldComponentUpdate (nextProps) {
    const currentRecipe = this.props.data.recipe;
    const nextRecipe = nextProps.data.recipe;

    // deep check if the previous values and next values are similars
   // if not, rerender the component
    if (!equal(currentRecipe,  nextRecipe)) {
    if(this.props.data.recipe) {
        var {title, description} =    this.props.data.recipe
        return this.recipe=  (
            <div className={style.dish_details} >
                <p> Title: {title}   </p>
                <p> Description: {this.props.description}  </p>
            </div>
        )
        // if there is no recipe data, just display a simple text
        }else{
        return this.recipe= <div>  Here details </div>
        }
    }else {
        return false;
    }
    }

    render() {
        return (
                <div className={style.displayer_layout} >
                    <div className={style.recipe_image}></div>
                 <div>

         // render the recipe
                 {this.recipe}

                  </div>
                    <div className={style.dish_footer}>
                        <button onClick={this.addArticle} className={style.add}></button>
                    </div>
                </div>
        )
    }
}


// set the query
const fetchRecipe = gql`
  query recipe($id: String!) {
        recipe(id: $id){
      title
      description
    }
  }
`;

// bind GraphQL to my component
export default graphql(fetchRecipe,
        {options(ownProps) {
            return {
              variables: { id : ownProps.id} //ownProps.id allow to recuperated the Redux's id's state, to make the recipe query
            }
}})(Displayer);