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

class Preview extends React.Component {
  componentDidMount() {
    setTimeout(() => window.dispatchEvent(new Event('resize')), 0)
  }

  render() {
    const {uiKit, page} = this.props
    const uiKitStyles = $editor.uiKit.generateUikitStyles(uiKit)
    return (
      <Fragment>
        <div className="main-area" id="page-scroll-area">
          {__MODE__ === 'theme-version' ? <PreviewTheme page={page} /> : <PreviewBlocks />}
        </div>
        <header className="header">
          <Settings key="settings" />
          <Distort />
        </header>
        <Helmet>
          <style type="text/css">{uiKitStyles}</style>
        </Helmet>
      </Fragment>
    )
  }
}

export default  connect(({uiKit, pages: {page}}) => ({page, uiKit}))(Preview)
