import React from 'react'
// import { toStateTree } from 'modules/state-tree'
import { observer } from 'xmobx/mobx-react'
import { merge, identity } from 'chain-able-boost'

// @TODO move this to bootstrapper
// import { get } from 'lodash'
// would be fixtures
// const exampleMockDataDefaults = {
//   eh: true,
// }

/**
 * @param {*} mockDataLikeFixture Object
 * @param {*} [mockTransformer=Function] optional transformer, default returns merged properties
 * @return {React.Component} connected the props with the mock data
 *
 * @example
 *
 *    @mockStore(fixture)
 *    class UI extends React.Component {}
 *
 */
function mockStore(mockDataLikeFixture, mockTransformer = identity) {
  return function connectToMock(ViewComponent) {
    @observer
    class Mocked extends React.Component {
      render() {
        const props = this.props
        const decoratedMockedProps = mockTransformer({
          ...mockDataLikeFixture,
          ...props,
        })

        try {
          throw new Error('for debugging')
        } catch (error) {
          // this has been added so you can turn on "pause on uncaught exceptions" in chrome debugger to inspect :-)
        }
        return <ViewComponent {...decoratedMockedProps} />
      }
    }

    return Mocked
  }
}

export { mockStore }
export default mockStore