import gql from 'graphql-tag'
import { Query } from 'react-apollo'

const QUERY_SYSTEM = gql`
  query QUERY_SYSTEM {
    system {
      apiVersion
      hostname
      type
      platform
      arch
      release
      uptime
      loadavg
      totalmem
      freemem
      cpus {
        model
        speed
        times {
          user
          nice
          sys
          idle
          irq
        }
      }
      networkInterfaces {
        name
        addresses {
          address
          netmask
          family
          mac
          internal
          cidr
          scopied
        }
      }
    }
  }
`

const System = props => (
  <Query query={QUERY_SYSTEM}>
    {({ data, loading, error }) => {
      if (loading) return <p>Loading system data...</p>
      if (error) {
        console.error(error)
        return <p>Error: {error.message}</p>
      }
      if (!data) return <p>No system data found</p>
      const { system } = data
      return (
        <div>
          <h1>System</h1>
          <p>API Version:</p><p>{system.apiVersion}</p>
          <p>Hostname:</p><p>{system.hostname}</p>
          <p>Type:</p><p>{system.type}</p>
          <p>Platform:</p><p>{system.platform}</p>
          <p>Architecture:</p><p>{system.arch}</p>
          <p>Release:</p><p>{system.release}</p>
          <p>Uptime:</p><p>{system.uptime}</p>
          <p>Total memory:</p><p>{system.totalmem}</p>
          <p>Free memory:</p><p>{system.freemem}</p>
        </div>
      )
    }}
  </Query>
)

export default System