import styled from 'styled-components'
import gql from 'graphql-tag'
import { Mutation, Query } from 'react-apollo'
import { INTERFACES_FULL } from './InterfaceList'

const StyledConnection = styled.div`
  fieldset {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

  textarea {
    display: block;
    font-family: 'roboto_mono';
  }

  h1 {
    grid-column: span 2;
  }
`

const CONNECTION_COMMAND = gql`
  mutation CONNECTION_COMMAND(
    $connectionId: ID!
    $type: String!
    $string: String!
    $options: String
  ) {
    connectionCommand(
      connectionId: $connectionId
      type: $type
      string: $string
      options: $options
    )
  }
`

const CONNECTION_QUERY = gql`
  query CONNECTION_QUERY($id: ID!) {
    connection(id: $id) {
      workerInfo {
        pid
        killed
        exitCode
        signalCode
      }
    }
  }
`

class Connection extends React.Component {
  state = {
    command: ''
  }

  changeInput = event => {
    this.setState({ [event.target.id]: event.target.value })
  }

  render () {
    const { id, device, interfaceName } = this.props.data
    console.log(id, device, interfaceName)
    return (
      <Mutation
        mutation={CONNECTION_COMMAND}
        variables={{
          connectionId: id,
          type: 'ask',
          string: this.state.command
        }}
        refetchQueries={[{ query: INTERFACES_FULL }]}
        fetchPolicy='no-cache'
      >
        {(connectionCommand, { data, error, loading }) => (
          <StyledConnection>
            <h1>Connection</h1>
            <fieldset>
              <label htmlFor='command'>Command</label>
              <input
                type='text'
                value={this.state.command}
                onChange={this.changeInput}
                id='command'
                placeholder='Command'
              />
            </fieldset>
            <button
              type='submit'
              onClick={connectionCommand}
              disabled={loading}
            >
              Send
            </button>
            <textarea
              id='response'
              value={data && data.connectionCommand}
              readOnly
            />
            <textarea id='error' value={error} readOnly />
            <Query query={CONNECTION_QUERY} variables={{ id }}>
              {({ data, error, loading }) => {
                if (loading) return null
                if (error) return null
                console.log(data)
                const {
                  connection: { workerInfo }
                } = data
                return (
                  <>
                    <p>pid: {workerInfo.pid}</p>
                    <p>killed: {workerInfo.killed ? 'yes' : 'no'}</p>
                  </>
                )
              }}
            </Query>
          </StyledConnection>
        )}
      </Mutation>
    )
  }
}

export default Connection