/**
 * @file
 * @alias state-tree-react
 */

// @observer
// class ConnectedThroughFactory extends React.Component {
//   render(props) {
//      const { wrappedComponentRef, ...remainingProps } = props
//   if (typeof datas.handleProps === 'function') {
//     datas.handleProps(props)
//   }
//   return (
//     <ConnectedComponent
//       {...remainingProps}
//       ref={wrappedComponentRef}
//       data={datas}
//       {...named}
//       {...datas}
//     />
//   )

import React from 'react'
import { isFunction } from 'exotic'
import { observer, inject, Provider } from 'xmobx/mobx-react'
import { toMobx } from 'modules/state-tree'
import PropTypes from 'prop-types'
import hoistStatics from 'hoist-non-react-statics'
// import { toComponentName } from 'modules/view-container/deps/toComponentName'
import { toComponentName } from 'modules/identifier'
import { injectAndObserve } from './injectAndObserve'

/**
 * @NOTE could connect to data without datas
 * @param {*} datas
 * @param {Class.extends.React.Component} Component
 * @return {Wrapped.Class.extends.React.Component} auto-updating component
 */
const connectToDataFactory = (datas, name = 'datas') => Component => {
  const named = { [name]: datas }

  // @NOTE IMPORTANT
  const ConnectedComponent = observer(Component)

  // @TODO could use class here instead
  function DataWrap(props) {
    const { wrappedComponentRef, ...remainingProps } = props

    if (isFunction(datas.handleProps)) {
      datas.handleProps(props)
    }

    return (
      <ConnectedComponent
        {...remainingProps}
        ref={wrappedComponentRef}
        data={datas}
        {...named}
        {...datas}
      />
    )
  }

  // DataWrap.prototype.componentWillReact = function() {
  //   console.debug('reaction: ', this)
  // }

  DataWrap.displayName = toComponentName(Component) + `@connectedToData`
  DataWrap.WrappedComponent = Component

  // why do we want a ref to this again?
  DataWrap.propTypes = {
    wrappedComponentRef: PropTypes.func,
  }

  // const provide = children =>
  //   <Provider {...named}>
  //     {children}
  //   </Provider>
  // let connected = DataWrap
  // connected = inject(datas)(DataWrap)
  // connected = observer(DataWrap)
  // return provide(connected)
  //
  // return observer(hoistStatics(DataWrap, Component))

  return observer(DataWrap)
}

export { connectToDataFactory, connectToDataFactory as connectToData }
export { injectAndObserve }
export default connectToDataFactory