import React from 'react'
import { camelCase } from 'chain-able-boost'
import { isString } from 'exotic'

// @see https://reactjs.org/docs/react-api.html#isvalidelement
function createElementWithClassName(tagName, className = 'NOCLASS', displayName) {
  // we actually DO NOT WANT THIS camelCase(className)
  const name = displayName || className || `CreatedWithClass<${tagName}>`

  if (isString(tagName) === false && React.isValidElement(tagName) === false) {
    console.log({ tagName, className })
    throw new Error(`createElementWithClassName with ${tagName}.${className} is not valid`)
  }

  // @TODO support activeclass as toggle + selectorless
  const factory = props => {
    // combine custom className if any
    const finalClassName = [className, props.className].join(' ')

    const creation = React.createElement(tagName, {
      // displayName: name,
      className: finalClassName,
      ...props,
    })
    // creation.displayName = displayName || 'CreatedWithClass'
    return creation
  }
  factory.displayName = name
  return factory
  // const factory = React.createFactory(tagName, { className })
  // if (displayName) {
  //   factory.name = displayName
  // }
  // return factory
  // return function(props) {
  //   return factory({ , ...props })
  // }
}

export { createElementWithClassName }
export default createElementWithClassName