import React, {Fragment} from "react"
import {Helmet} from "react-helmet"
import Settings from "./settings/index.js"
// import Modifiers from "./settings/modifiers.js"
import {connect} from "react-redux"
import $editor from "weblium/editor"
import PreviewBlocks from './block'
import Distort from './distort'

class Preview extends React.Component {
  // state = {
  //   modifiers: {},
  // }

  // saveModifier = (modifiers) => {
  //   this.setState({modifiers})
  // }

  componentDidMount() {
    setTimeout(() => window.dispatchEvent(new Event('resize')), 0)
  }

  render() {
    const {uiKit} = this.props
    // const {modifiers} = this.state
    const uiKitStyles = $editor.uiKit.generateUikitStyles(uiKit)
    return (
      <Fragment>
        <div className="main-area" id="page-scroll-area">
          <PreviewBlocks />
        </div>
        <header className="header">
          <Settings key="settings" />
          {/*<Modifiers key="modifiers" uiModifiers={modifiers} saveModifier={this.saveModifier} />*/}
          <Distort />
        </header>
        <Helmet>
          <style type="text/css">{uiKitStyles}</style>
        </Helmet>
      </Fragment>
    )
  }
}

export default connect(_.pick(['uiKit']))(Preview)
