WizardComponent

import React, { Component } from 'react'
//  libs
import { connect } from 'react-redux'
import { compose } from 'react-apollo'
import { hideModal } from 'reducers/modals'
import { object, func } from 'prop-types'
//  components
import Modal from 'components/UI-elements/Modal'

export default ({ modalType, onSubmit, hocs, mapStateToProps, mapDispatchToProps, initialValue, Children }) => {
  class Wizard extends Component {
    static propTypes = {
      hideModal: func,
      modalData: object
    }

    state = {
      page: 1
    }

    onSubmit = onSubmit.bind(this)

    onHideModal = () => {
      this.props.hideModal({ modalType })
      this.setState({
        page: 1
      })
    }

    nextPage = e => {
      e.preventDefault()

      this.setState(({ page }) => ({
        page: page + 1
      }))
    }

    previousPage = e => {
      e.preventDefault()
      this.setState({ page: this.state.page - 1 })
    }

    render () {
      const { modalData } = this.props
      return (
        <Modal
          isOpen={modalData.isOpen}
          width={modalData.width}
          hideModal={this.onHideModal}
          withCloseButton
          grayMask
        >
          <Children
            {...this.props}
            initialValues={typeof initialValue === 'function' ? initialValue(modalData) : initialValue || {}}
            onSubmit={this.onSubmit}
            page={this.state.page}
            nextPage={this.nextPage}
            previousPage={this.previousPage}
          />
        </Modal>
      )
    }
  }

  const defaultMapStateToProps = ({ modals }) => ({
    modalData: modals[modalType]
  })

  const defaultMapDispatchToProps = {
    hideModal
  }

  return compose(
    connect(mapStateToProps || defaultMapStateToProps, mapDispatchToProps || defaultMapDispatchToProps),
    ...hocs || []
  )(Wizard)
}