import React, { Component } from 'react';
import Router from 'next/router';
import { Mutation, Query } from 'react-apollo';
import gql from 'graphql-tag';
import { adopt } from 'react-adopt';
import Form from './styles/Form';
import FormatMoney from '../lib/formatMoney';
import Error from './ErrorMessage.js';

const SINGLE_ITEM_QUERY = gql`
    query SINGLE_ITEM_QUERY($id: ID!) {
        item(where: { id: $id }) {
            id
            title
            description
            price
        }
    }
`;

const UPDATE_ITEM_MUTATION = gql`
    mutation UPDATE_ITEM_MUTATION(
        $id: ID!
        $title: String
        $description: String
        $price: Int
    ) {
        updateItem(
            id: $id
            title: $title
            description: $description
            price: $price
        ) {
            id
            title
            description
            price
        }
    }
`;

const Composed = adopt({
    singleItem: ({ that, render }) => <Query query={SINGLE_ITEM_QUERY} variables={{ id: that.props.id }}>{ render }</Query>,
    updateItem: ({ that, render }) => <Mutation mutation={UPDATE_ITEM_MUTATION} variables={that.state.itemData}>{ render }</Mutation>
});

class UpdateItem extends Component {
    state = {
        updateItemError: null,
        updateItemLoading: false,
        itemData: {}
    };

    handleChange = e => {
        const { name, type, value } = e.target;
        const val = type === 'number' ? parseFloat(value) : value;

        var itemData = { ...this.state.itemData };
        itemData[name] = val;
        this.setState({ itemData });
    };

    updateItem = async (e, updateItemMutation) => {
        e.preventDefault();
        let err = false;

        this.setState({ updateItemLoading: true });

        const res = await updateItemMutation({
            variables: {
                id: this.props.id,
                ...this.state.itemData,
            }
        }).catch((error) => {
            err = true;
        });

        this.setState({ updateItemLoading: false });
        return err;
    };

    render() {
        return (
            <Composed that={this}>
                {({ singleItem, updateItem }) => {
                    if (singleItem.loading) return <p>Loading...</p>;
                    if (!singleItem.data.item) return <p>No Item Found for ID {this.props.id}!</p>;

                    return (
                        <Form onSubmit={async e => {
                            const res = await this.updateItem(e, updateItem);
                            if (res) this.setState({ updateItemError: { 'message': 'Something went wrong!' }});
                        }}>
                            <Error error={this.state.updateItemError} />
                            <fieldset disabled={this.state.updateItemLoading} aria-busy={this.state.updateItemLoading}>
                                <label htmlFor="title">
                                    Title
                                    <input
                                        type="text"
                                        id="title"
                                        name="title"
                                        placeholder="Title"
                                        defaultValue={singleItem.data.item.title}
                                        onChange={this.handleChange}
                                        required
                                    />
                                </label>
                                <label htmlFor="price">
                                    Price
                                    <input
                                        type="number"
                                        id="price"
                                        name="price"
                                        placeholder="Price"
                                        defaultValue={singleItem.data.item.price}
                                        onChange={this.handleChange}
                                        required
                                    />
                                </label>
                                <label htmlFor="description">
                                    Description
                                    <textarea
                                        id="description"
                                        name="description"
                                        placeholder="Enter A Description"
                                        defaultValue={singleItem.data.item.description}
                                        onChange={this.handleChange}
                                        // required
                                    />
                                </label>
                                <button type="submit">Sav{this.state.updateItemLoading ? 'ing' : 'e'}</button>
                            </fieldset>
                        </Form>
                    );
                }}
            </Composed>
        );
    }
}

export default UpdateItem;
export { UPDATE_ITEM_MUTATION };