import React, { Component } from 'react';
import { graphql, gql, compose } from 'react-apollo';
import { SINGLE_ITEM_QUERY, UPDATE_LINK_MUTATION } from '../queries';

class UpdateLink extends Component {
  state = {
    ...this.props.findItem.Item,
  };

  saveToState = e => {
    let { name, value, type } = e.target;
    if (type === 'number') {
      value = parseInt(value);
    }

    this.setState({ [name]: value });
  };

  _createLink = async e => {
    e.preventDefault();
    // pull the values from state
    const { description, title } = this.state;
    const { id } = this.props;
    // create a mutation
    // TODO: handle any errors
    // turn loading on
    this.setState({ loading: true });
    console.log(this.state);
    const res = await this.props.updateItem({
      // pass in those variables from state
      variables: {
        ...this.state,
      },
    });
    this.setState({ loading: false });
  };

  render() {
    return (
      <div>
        <h2>Edit {this.props.id}</h2>
        {this.state.loading ? 'LOADING...' : 'Ready!'}
        <form onSubmit={this._createLink}>
          <label htmlFor="title">Title</label>
          <input value={this.state.title} name="title" onChange={this.saveToState} type="text" />

          <label htmlFor="description">Description</label>
          <textarea value={this.state.description} name="description" onChange={this.saveToState} />

          <label htmlFor="price">Price</label>
          <input type="number" name="price" onChange={this.saveToState} value={this.state.price} />

          <label htmlFor="fullPrice">Full Price</label>
          <input type="number" name="fullPrice" onChange={this.saveToState} value={this.state.fullPrice} />

          <button type="submit">Save...</button>
        </form>
      </div>
    );
  }
}

const ComponentWithMutations = compose(
  // First, query for getting the link
  graphql(SINGLE_ITEM_QUERY, {
    name: 'findItem',
    options: ({ id }) => ({
      variables: { id },
    }),
  }),
  // Second, the mutation for updating the link
  graphql(UPDATE_LINK_MUTATION, { name: 'updateItem' })
)(UpdateLink);

export default ComponentWithMutations;