import React from 'react';
import PropTypes from 'prop-types';
import { Modal,openModal,closeModal } from '../Modal/Modal.js';
import { Toast } from '../ToastComponent/Toast.js';
import ModalBody from './ModalBody';
import { combineReducers } from 'redux-immutable';
import { createStore, applyMiddleware } from 'redux';
import {whenReducer} from './reducer';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux';
import { Provider,connect } from "react-redux";
import Styles from './styles'

const rootReducer = {
    'whenReducer':whenReducer
}
const history = createHistory()
const historyMiddleware = routerMiddleware(history)
const middleware = applyMiddleware(thunk,historyMiddleware);
const store = createStore(
    combineReducers({
        ...rootReducer
    }),middleware
)

export default class CronScheduler extends React.Component {
    constructor(){
        super();
        this.state={
            visibility:false
        }
    }
    toggleVisibility(){
        var Component = () => <Provider store={store}><ModalBody {...this.props} closeModal={(data)=>closeModal(data)}/></Provider>
        this.setState({
            visibility:!this.state.visibility
        },()=>{
            if(this.state.visibility){
                openModal('indentModal', { 
                    Component : Component,
                    Heading : 'Set Recurrence',
                    height : 500,
                    width : 600
                })
            }
        })
    }
    render() {
        return (
            <Provider store={store}>
                <Styles>
                    <div onClick={this.toggleVisibility.bind(this)}>{this.props.children}</div>
                    <Toast />
                </Styles>
            </Provider>
        );
    }
}

