import React from 'react';
import { Mutation } from 'react-apollo';
import SMS from './sendSms.graphql';

let message = '';
let theirNumber = '';
const onMessageChange = (e) => {
  message = e.target.value;
};
const onTheirNumberChange = (e) => {
  theirNumber = e.target.value;
};
const TwilioSMSView = () => (
  <Mutation
    mutation={SMS}
  >
    {sendSms => (
      <div>
        <input type="text" placeholder="message" onChange={onMessageChange} />
        <br />
        <input type="text" placeholder="their number" onChange={onTheirNumberChange} />
        <br />
        <button
          type="button"
          onClick={() => {
            sendSms({
              variables: { msg: message, recipientNum: theirNumber },
            });
          }}
        >
          {'Call'}
        </button>
      </div>
    )}
  </Mutation>
);
export default TwilioSMSView;