import React, {Fragment} from 'react'
import $editor from 'weblium/editor'
import _ from 'lodash/fp'

const {EnhancedBlock, enhancers: {withBlocks = _.identity}} = $editor
class PreviewTheme extends React.Component {
  state = {
    Theme: require('block').default,
  }
  componentDidMount() {
    if (module.hot) {
      module.hot.accept(['block'], () => {
        delete require.cache[require.resolve('block')]
        const Theme = require('block').default
        this.setState({Theme})
      })
    }
  }

  render() {
    const {blocks, ...props} = this.props
    return (
      <Fragment>
        {_.map((block) => {
          const {id, View, modifier, name, roles, categories, content} = block
          const blockProps = {View, modifier, name, roles, categories, content}
          return (
            <EnhancedBlock
              {...props}
              block={blockProps}
              View={block.View}
              id={id}
              blockId={id}
            />
          )
        })(blocks)}
      </Fragment>
    )
  }
}

export default withBlocks(PreviewTheme)
