import React from 'react'
import { storiesOf } from '@storybook/react'
import { stringify } from 'chain-able-boost'
import { observable, action } from 'xmobx/mobx'
import { observer } from 'xmobx/mobx-react'

// https://github.com/facebook/react/issues/6410
// @todo convert to actions
const events = observable({
  list: [],
  enter: 0,
  leave: 0,
  over: 0,
  out: 0,
  focus: 0,
  blur: 0,
})
const saveEvent = action(event => {
  event.persist()
  events.list.push(event)
})

@observer
class EventsCheatsheet extends React.Component {
  render() {
    console.log(events.list)

    return (
      <div
        style={ { width: 200, height: 200, backgroundColor: 'red' } }
        onFocus={event => {
          saveEvent(event)
          events.focus += 1
        }}
        onBlur={event => {
          saveEvent(event)
          events.blur += 1
        }}
        onMouseEnter={event => {
          // saveEvent(event)
          events.enter += 1
        }}
        onMouseLeave={event => {
          // saveEvent(event)
          events.leave += 1
        }}
        onMouseOver={event => {
          // saveEvent(event)
          events.over += 1
        }}
        onMouseOut={event => {
          // saveEvent(event)
          events.out += 1
        }}
      >
        Enter called {events.enter} times
        <br />
        Leave called {events.leave} times
        <br />
        Over called {events.over} times
        <br />
        Out called {events.out} times
        <br />
        Focus called {events.focus} times
        <br />
        Blur called {events.blur} times
        <br />
        <div style={ { width: 100, height: 100, backgroundColor: 'blue' } }>
          {stringify(Object.keys(events), undefined, 2)}
        </div>
      </div>
    )
  }
}

storiesOf('app/EventsCheatsheet', module).add('focus click all them', () => {
  return <EventsCheatsheet />
})