import React from 'react';
import { Mutation } from 'react-apollo';
import callMutation from './call.graphql';

class TwilioClickToCallView extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      yourNumber: '',
      theirNumber: '',
    };
  }

  render() {
    const { yourNumber, theirNumber } = this.state;
    return (
      <Mutation
        mutation={callMutation}
      >
        {call => (
          <div>
            <input
              type="text"
              placeholder="your number"
              onChange={ev => this.setState({ yourNumber: ev.target.value })}
            />
            <input
              type="text"
              placeholder="their number"
              onChange={ev => this.setState({ theirNumber: ev.target.value })}
            />
            <button
              type="button"
              onClick={() => {
                call({
                  variables: { senderNumber: yourNumber, recipientNumber: theirNumber },
                });
              }}
            >
              {'call'}
            </button>
          </div>
        )}
      </Mutation>
    );
  }
}
export default TwilioClickToCallView;