import React, { PureComponent } from 'react';
//import your UpdatePlayer.css and CreatePlayer.css for your Player styles.
import './CreatePlayer.css';
import './UpdatePlayer.css';
//import your QUery and Mutation component for retrieving and manipulating data via it's query and mutation arguments.
import { Query, Mutation } from 'react-apollo';
import gql from 'graphql-tag';

//Define your Schema that will be responsible for retrieving data via the route id argument.
//We will alias our query to player since it is more readable.
const getPlayerQuery = gql`
    query GetPlayer($id: String) {
        player: getPlayer(id: $id) {
            name
            position
            team
            jerseyNumber
            wonSuperBowl
        }
    }
`;


//Define a mutation schema that will be responsible for updating a player, with nullable arguments.
const updatePlayerMutation = gql`
    mutation UpdatePlayer($id: String, $name: String, $position: String, $team: String, $jerseyNumber: Int, $wonSuperBowl: Boolean) {
        updatePlayer(id: $id, name: $name, position: $position, team: $team, jerseyNumber: $jerseyNumber, wonSuperBowl: $wonSuperBowl) {
            name
            position
            team
            jerseyNumber
            wonSuperBowl
        }
    }
`;

//Define a mutation schema that will be responsible for deleting a player using an id.
const deletePlayerMutation = gql`
    mutation DeletePlayer($id: String) {
        deletePlayer(id: $id) {
            id
        }
    }
`;


export default class Player extends PureComponent {
    //Define your state that will be responsible for opening a edit form.
    constructor() {
        //Use super to initialize the parent props.
        super();
        //Define a boolean for showing your editForm, and fields to use to update your player.
        this.state = {
            showEditForm: false,
            updatedName: '',
            updatedPosition: '',
            updatedTeam: '',
            updatedJerseyNumber: '',
            updatedWonSuperBowl: false
        }
    }

    //Define your updatePlayerFunc for updating a player.
    //Make it asynchronous so your page will refresh with your new data
    async updatePlayerFunc(func) {
        //Assign a variable to your url's id.
        const id = this.props.match.params.id;
        //Define your updatedPlayer.
        //Which will hold all your state for updating a player.
        let updatedPlayer = {
            id,
            name: this.state.updatedName,
            position: this.state.updatedPosition,
            team: this.state.updatedTeam,
            jerseyNumber: this.state.updatedJerseyNumber,
            wonSuperBowl: this.state.updatedWonSuperBowl
        };

        //Now loop through your updatedPlayer keys, and delete the property that are null or an empty string, and if it is not a boolean
        //Since  false is falsey.
        for(var key in updatedPlayer) {
            if(!updatedPlayer[key] &&  typeof updatedPlayer[key] !== 'boolean') {
                delete updatedPlayer[key]
            }
        }

        //Now pass your updatePLayer as a property for your variables for your func argument.
        //And assign a optimistic resposne which will be the returnedPlayer.
        await func({
            variables: updatedPlayer
            })
        //Now refresh your location using your history object's go method.
        //No need to refresh since our webpage will refresh and automatically set our state to it's initial values.
        this.props.history.go();
    }

    //Define your deletePlayerFunc for deleting a player,
    //and also have the method asynchronous so you would delete player before redirecting the user to the player's list.
    async deletePlayerFunc(func) {
        //Now assign the id of the current player from the url.
        const id = this.props.match.params.id;
        //Now pass your id to the func which would be where your mutate delete method will take a object with a variables property of your id.
        await func({ variables: { id } });
        //Then redirect your users to the player's list.
        this.props.history.push('/players');
    }

    render() {
        //Assign a variable from your route.
        const playerId = this.props.match.params.id;
        console.log('this.state.updatePlayer', this.state.returnedPlayer);
        return (
            <div className="container update-container">
                {/*Have your Mutations and your result from your getPlayerQuery nested in your Query component. */}
                {/*Pass your id to your variables of your Query */}
                <Query
                    query={getPlayerQuery}
                    variables={{"id": playerId}}
                >
                    {(response, error) => {
                        if(error) {
                            //If there is an error, log an error to the console.
                            //And return html holding your error.
                            console.log('Get Players Query Error-------', error);
                            return <p>{JSON.stringify(error)}</p>
                        }
                        if(response && response.data && response.data.player) {
                           return (
                                <div>
                                    <h2>{response.data.player.name}</h2>
                                    <h4>Position: {response.data.player.position}</h4>
                                    <h4>Team: {response.data.player.team}</h4>
                                    <h4>#: {response.data.player.jerseyNumber}</h4>
                                    <h4>{response.data.player.wonSuperBowl ? 'Yes' : 'No'}</h4>
                               </div>
                           );
                        }
                        //Else return a loading html.
                        return <p>Loading....</p>
                    }}
                </Query>
          </div>
    );
  }
}