import PropTypes from 'prop-types'
import React, { useEffect } from 'react'

const loadFlowbox = () => new Promise(resolve => {
   (function(d, id) {
    if (!window.flowbox) { var f = function () { f.q.push(arguments); }; f.q = []; window.flowbox = f; }
    if (d.getElementById(id)) {return resolve();}
    var s = d.createElement('script'), fjs = d.scripts[d.scripts.length - 1]; s.id = id; s.async = true;
    s.src = 'https://connect.getflowbox.com/flowbox.js';
    fjs.parentNode.insertBefore(s, fjs);
    resolve()
  })(document, 'flowbox-js-embed');
})

const containerName = 'js-flowbox-flow'
const locale = 'en-GB'

const Flowbox = ({ flowKey: key }) => {
  const container = ${containerName}-${key}
  useEffect(() => {
    loadFlowbox().then(() => {
     window.flowbox('init', { container: #${container}, key, locale })
    })
  }, [container, key])

  return <div id={container} />
}

Flowbox.propTypes = {
  flowKey: PropTypes.string.isRequired,
}

export default Flowbox