import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as ReactDOMServer from 'react-dom/server';
import { Provider } from 'react-redux';
import hypernova, { serialize, load } from 'hypernova';
import { Store } from 'redux';

export const renderReactAsyncReduxServer = (name: string, C: React.ComponentClass, store: Store<any>) => hypernova({
  server() {
    return (props: any) => {
      const wrappedComponent = <Provider store={store}><C /></Provider>;
      const contents = ReactDOMServer.renderToString(wrappedComponent);
      const serializeContent = serialize(name, contents, store.getState());
      // console.log("SERIALIZECONTENT", serializeContent);
      return serializeContent;
    };
  },
  client() {
    /* tslint:disable:no-empty */
  }
});

export const renderReactAsyncReduxClient = (name: string, C: React.ComponentClass, reduxStoreCreator: (data: any) => Store<any>) => hypernova({
  server() {
  },
  client() {
    const payloads: any[] = load(name);
    if (payloads) {
      payloads.forEach((payload) => {
        const { node, data } = payload;
        // console.log("CLIENT-DATA", data);
        const store = reduxStoreCreator(data);
        const wrappedComponent = <Provider store={store}><C /></Provider>;
        if (ReactDOM.hydrate) {
          ReactDOM.hydrate(wrappedComponent, node);
        } else {
          ReactDOM.render(wrappedComponent, node);
        }
      });
    }
  }
});