/**
 * @file side effect only  file, no exports
 */
import React from 'react'
import { isFunction } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { toComponentName } from '@skava/modules/___dist/identifier'
import ErrorBoundary from '../ErrorBoundary'

// override of exotic
const ReactComponent = React.Component

// ========================

/**
 * @todo - has conflict with React hot loader
 *
 * @see https://github.com/Rich-Harris/buble
 * @see https://github.com/mobxjs/mobx-react/blob/master/src/observer.js
 * overriding, transpiled
 */
// eslint-disable-next-line
let ReactComponentOverride = (function(ReactComponent) {
  // eslint-disable-next-line
  function ReactComponentOverride(props, context, updater) {
    // "super"
    const $this = ReactComponent.call(this, props, context, updater)
    const name = toComponentName(this)

    // console.info('TAP: ', name)

    if (name === 'ProxyComponent') {
      return this
    }
    if (this instanceof React.PureComponent) {
      // console.log('PURE', name)
      return this
    } else {
      // console.log('COMPONENT: ', name)
    }

    // self = this
    // function render() {
    //   const view = renderReference.call(self)
    //   return React.createElement(ErrorBoundary, null, view)
    // }

    // // @note !important
    // const IS_BROWSER = typeof window === 'object'
    // @todo when we run this in ssr, lots of `shouldComponentUpdate`...
    // const IS_BROWSER = true

    // @note very slow but helps debug
    // decorateComponentDidUpdate(this)

    if (process.env.LOG_REACT_TAP_RENDERS || true) {
      // this way, we can override
      const renderReference = this.render

      /**
       * @todo - add animated styles on the border color on update
       * @todo - add a pseudo element to add an overlay
       * @todo - add a stack trace of component children & use React.cloneElement
       */
      // eslint-disable-next-line
      function render() {
        // console.log('rendering_' + name)
        // console.log('LOG_REACT_TAP_RENDERS', process.env.LOG_REACT_TAP_RENDERS)

        // if (process.env.LOG_REACT_TAP_RENDERS) {
        //   console.time('rendering_' + name)
        // }
        // const rendered = renderReference.call(this)
        // if (process.env.LOG_REACT_TAP_RENDERS) {
        //   console.timeEnd('rendering_' + name)
        // }
        // return rendered

        // const name = toComponentName(this)
        console.event('rendering_', name)
        return (
          <ErrorBoundary name={name}>
            {renderReference.call(this)}
          </ErrorBoundary>
        )

        // const name = toComponentName(this)
        // return (
        //   <ErrorBoundary>
        //     <div title={name} style={ { border: '1px dashed tomato' } }>
        //       {renderReference.call(this)}
        //     </div>
        //   </ErrorBoundary>
        // )
      }

      // this.render = render
    }

    // https://github.com/mobxjs/mobx-react/blob/master/src/observer.js
    if (
      this.isMobXReactObserver !== true &&
      isFunction(this.shouldComponentUpdate) === false
    ) {
      observer(this)
    }
    // or .isMobXReactObserver
    // if (isFunction(this.shouldComponentUpdate) === true) {
    //   // this logs warnings
    //   // - maybe already is observer, we aren't checking, could cause issue
    // } else {
    //   observer(this)
    // }

    return this
  }

  // prototype the old fashioned way
  if (ReactComponent) {
    // eslint-disable-next-line
    ReactComponentOverride.__proto__ = ReactComponent
  }
  ReactComponentOverride.prototype = Object.create(
    ReactComponent && ReactComponent.prototype
  )
  ReactComponentOverride.prototype.constructor = ReactComponentOverride

  return ReactComponentOverride
})(ReactComponent)

/**
 * @description
 * uncomment this to have lifecycle control over every React.Component
 *
 * @note yay, with ProxyComponent gone it works ^w^
 */
Object.defineProperty(React, 'Component', {
  configurable: true,
  // writable: true,
  enumerable: true,
  value: ReactComponentOverride,
})