import React from 'react' import ReactDOM from 'react-dom'

import wrapWithProvider from './wrapWithProvider'

// Used in findAndCreateComponent import components from './availableComponents'

// This function gets called by the react_rails_webpack Rails helper. // It renders the specified component in the div from which the // function is called. export function renderLastComponentDiv () {

const elements = document.getElementsByClassName('react-component-target')
const lastElementIndex = elements.length - 1
renderReactComponentInDiv(elements[lastElementIndex])

}

export function renderReactComponentInDiv (targetDiv) {

const componentName = targetDiv.getAttribute('data-componentname')
const componentProps = JSON.parse(targetDiv.getAttribute('data-componentprops'))

ReactDOM.render(
  findAndCreateComponent(componentName, componentProps),
  targetDiv
)

}

function findAndCreateComponent (componentName, props) {

const component = components[componentName]
const element = React.createElement(component.class, props)

if (component.redux) {
  return wrapWithProvider(element)
} else {
  return element
}

}