import { createClient } from 'reactotron-core-client'
 
// setup a reactotron client
const client = createClient({
  // injected in for compatibility
  createSocket: path => new WebSocket(path),
 
  host: 'localhost',
  port: 9090,
  name: 'I am a client!',
 
  // fires when we get connected to a server
  onConnect: () => console.log('hi'),
 
  // fires when we get disconnected from the server
  onDisconnect: () => console.log('bye'),
 
  // fires when the server is telling us something
  onCommand: ({type, payload}) => {
    switch (type) {
      case 'server.intro':
        const { name, version } = payload
        break
 
      case 'state.values.request':
        const { path } = payload // the path to the state
        break
 
      case 'state.keys.request':
        const { path } = payload // the path to the state
        break
 
      case 'state.values.subscribe':
        const { paths } = payload // string array of state paths
        break
 
      case 'state.action.dispatch':
        const { action } = payload // an object to be dispatch through the state plugin
        break
 
    }
    console.log(`I just received a ${type} command`)
    console.log(payload)
  }  
})
 
// connect to the server
client.connect()
 
// send a log message as a string
client.send('log', { level: 'debug', message: 'hello!' })
 
// send a log message as a string that's important
client.send('log', { level: 'debug', message: 'hello!' }, true)
 
// sending an object log message
client.send('log', {
  level: 'debug',
  message: {
    nested: [1,2, {hello: 'there'}],
    fun: true
  }
})
 
// send a warning
client.send('log', { level: 'warn', message: 'oops' })
 
// send an error with an optional stack trace
client.send('log', {
  level: 'error',
  message: 'crap',
  stackTrace: []
})
 
// report that an action is complete
client.send('state.action.complete', {
  'name': 'LOGIN_REQUEST',
  'action': {
    'type': 'LOGIN_REQUEST',
    'email': 'steve@kellock.ca',
    'password': 'secret...shhh....'
  }
})
 
// report that values have changed
client.send('state.values.response', {
  path: 'user.givenName',
  value: 'Steve',
  valid: true
})
 
// list the keys at a given path in state
client.send('state.keys.response', {
  path: 'user',
  keys: ['givenName', 'familyName'],
  valid: true
})
 
// let the server know the state values they're subscribed to have changed
client.send('state.values.change', {
  changes: [
    { path: 'user.givenName', value: 'Steve' },
    {
      path: 'user',
      value: { givenName: 'Steve', familyName: 'Kellock' }
    }
  ]
})
 
// report any API activity
client.send('api.response', {
  request: {
    url: 'https://api.example.com/v1/people',
    method: 'POST',
    data: {
      user: { givenName: 'Steve', familyName: 'Kellock' }
    },
    headers: {
      'Accept': 'application/json',
      'Cookie': '__ispy=mylittleye; __something=blue'
    }
  },
  response: {
    body: {result: 'ok'},
    status: 200,
    headers: {
      'Connection': 'keep-alive',
      'Server': 'cloudflare-nginx'
    }
  },
  duration: 150.0
})
 
// send a benchmark report up to the server
client.send('bench.report', {
  title: 'My Fast Algorithmz',
  steps: [
    { title: 'Step 1', time: 0 },
    { title: 'Step 2', time: 123 },
    { title: 'Step 3', time: 1024 }    
  ]
})
 
// a utility to time things
const elapsed = client.startTimer()
// do something you want to time
const ms = elapsed()  // the number of ms it took.  ish.
 
// display a custom event
client.display({
  name: 'MY EVENT',
  value: { color: 'green', vegetable: 'spinach', variant: 'baby', salad: true },
  important: true,
  preview: 'What\'s in my appetizer?'
})
 
 

{
  "host": "localhost",                   // the server we're connecting to
  "port": 9090,                          // the server's port
  "name": "My Fantastic App",            // the name of our app
  "userAgent": "Internet Explorer 3.0",  // the user agent
  "reactotronVersion": "0.99.1",         // the version of reactotron
  "environment": "development"           // our environment
}

export default () => reactotron => {}

// counter-plugin.js
export default () => reactotron => {
  let commandCounter = 0
  return {
    onCommand: command => {
      commandCounter++
      if (commandCounter === 69) console.log('tee hee')
    }
  }
}

{
  // Fires whenever a command is received from the server.
  //
  // command is an object with:
  //   .type - String - the name of the command
  //   .payload - anything - maybe null, maybe a string, maybe an object, not a function
  //                         its whatever the server sent.
  onCommand: command => {
    const { type, payload } = command
  },
 
  // Fires when we connect to the server.  Will only be called if the plugin
  // is setup before connecting to the server.
  onConnect: () => {},
 
  // Fires when we disconnect from the server.
  onDisconnect: () => {},
 
  // fires when the plugin is attached (this only happens once at initialization)
  onPlugin: reactotron => console.log('I have been attached to ', reactotron),
 
  // This is an object (not a function).  The keys are strings.  The values are functions.
  // Every entry in here will become a method on the Reactotron client object.
  // Collisions are handled on a first-come first-serve basis.
  //
  // These names are reserved:  
  //   connect, configure, send, use, options, connected, plugins, and socket.
  //
  // Sorry.
  //
  // I went with this mixin approach because the interface feels nice from the
  // calling code point-of-view.
  features: {
    // Reactotron.log('hello!')
    log: (message) => send('log', { level: 'debug', message } ),
 
    // Reactotron.warn('look out!  falling rocks!')
    warn: (message) => send('log', { level: 'warn', message } ),
  }
 
}