import React from 'react'
import PropTypes from 'prop-types'

class ElmHandler extends React.Component {
  node = React.createRef()

  // Setup the Elm app using the ref for this components node passing in flags passed in props. Connect the port functions from JS that have been passed in props to the ports established in the initialized Elm app for use during component update.
  componentDidMount () {
    const { src, flags, ports } = this.props
    this.app = src.init({
      node: this.node.current,
      flags
    })

    if (ports) {
      this.ports = ports(this.app.ports)
    }
  }

  // Passes new props through ports so we can capture updates that want from JS -> Elm, but always return false because Elm handles all DOM managemant for this node and its children and we do not want React to re-render omce Elm is initialized.
  shouldComponentUpdate (nextProps) {
    if (this.ports) {
      this.ports(nextProps)
    }
    return false
  }

  render () {
    return (
      <div ref={this.node} />
    )
  }
}

ElmHandler.propTypes = {
  flags: PropTypes.object,
  ports: PropTypes.func,
  src: PropTypes.object.isRequired
}

export default ElmHandler