import * as React from 'react'
import { isFunction, isObj } from 'exotic'
import { ObserverInput, InputState } from '../inputs'
import { PluginsContext, InputPluginType } from '../plugins/PluginsContext'

/**
 * @alias renderInputFromPluginContext
 * @todo @@perf
 */
export const renderInput = (inputState: InputState, index?: number) => (
  <PluginsContext.Consumer key={inputState.identifier + index + '-consumer'}>
    {plugins => {
      if (process.env.NODE_ENV !== 'production') {
        if (Array.isArray(plugins) === false) {
          throw new TypeError(
            'PluginsContext.Provider was not used - use it to provide the plugins used to render a form'
          )
        }
      }

      const isSatisfiedBy = (Plugin: InputPluginType) => {
        if (process.env.NODE_ENV !== 'production' && !Plugin) {
          console.error('plugins has an invalid entry: ')
          console.log(Plugin)
          return false
        } else {
          return Plugin.isSatisfiedByProps(inputState)
        }
      }

      if (plugins.some(isSatisfiedBy)) {
        // console.debug('[renderInput]')
        const Found = plugins.find(isSatisfiedBy) as InputPluginType

        /**
         * @todo this may cause updates when rendering...
         *       need to only `find` it once
         */
        if (isFunction(Found.defaultState)) {
          console.debug('[1form]:renderInput had defaultState - fn')
          inputState.merge(Found.defaultState(inputState))
        } else if (isObj(Found.defaultState)) {
          console.debug('[1form]:renderInput had defaultState - obj')
          inputState.merge(Found.defaultState)
        } else {
          console.debug('[1form]:renderInput had no defaultProps')
        }

        // @todo why this type no like
        return <Found state={inputState} key={inputState.identifier + index} />
      } else {
        console.error('[1form]:renderInput did not find plugin')
        return (
          <ObserverInput
            state={inputState}
            key={inputState.identifier + index}
          />
        )
      }
    }}
  </PluginsContext.Consumer>
)