// @flow
import React from 'react';
// import PropTypes from 'prop-types'
import { ApolloProvider, getDataFromTree } from 'react-apollo';
import initApollo from 'lib/initApollo';
import initRedux from 'lib/initRedux';
import { CookiesProvider } from 'react-cookie';

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { green100, green500, green700 } from 'material-ui/styles/colors';

const palette = {
  primary1Color: green500,
  primary2Color: green700,
  primary3Color: green100,
};

export default ComposedComponent =>
  class WithData extends React.Component {
    static displayName = `WithData(${ComposedComponent.displayName})`;
    // static propTypes = {
    //   serverState: PropTypes.object.isRequired
    // }
    // props = {
    //   serverState: any,
    // };

    static async getInitialProps(ctx) {
      let serverState = {};
      // console.log(ctx.req.universalCookies);

      // Evaluate the composed component's getInitialProps()
      let composedInitialProps = {};
      if (ComposedComponent.getInitialProps) {
        composedInitialProps = await ComposedComponent.getInitialProps(ctx);
      }

      const muiTheme = getMuiTheme(
        {
          palette,
        },
        {
          userAgent: ctx.req.headers['user-agent'],
        }
      );

      // Run all graphql queries in the component tree
      // and extract the resulting data
      if (!process.browser) {
        const apollo = initApollo(ctx.req.universalCookies);
        const redux = initRedux(apollo);
        // Provide the `url` prop data in case a graphql query uses it
        const url = { query: ctx.query, pathname: ctx.pathname };

        // Run all graphql queries
        const app = (
          // No need to use the Redux Provider
          // because Apollo sets up the store for us
          <CookiesProvider cookies={ctx.req.universalCookies}>
            <ApolloProvider client={apollo} store={redux}>
              <MuiThemeProvider muiTheme={muiTheme}>
                <ComposedComponent url={url} {...composedInitialProps} />
              </MuiThemeProvider>
            </ApolloProvider>
          </CookiesProvider>
        );
        await getDataFromTree(app);

        // Extract query data from the store
        const state = redux.getState();

        // No need to include other initial Redux state because when it
        // initialises on the client-side it'll create it again anyway
        serverState = {
          apollo: {
            // Make sure to only include Apollo's data state
            data: state.apollo.data,
          },
        };
      }

      return {
        serverState,
        ...composedInitialProps,
      };
    }

    constructor(props) {
      super(props);
      this.apollo = initApollo();
      this.redux = initRedux(this.apollo, this.props.serverState);
      this.muiTheme = getMuiTheme({
        palette,
      });
    }

    render() {
      return (
        // No need to use the Redux Provider
        // because Apollo sets up the store for us
        <CookiesProvider>
          <ApolloProvider client={this.apollo} store={this.redux}>
            <MuiThemeProvider muiTheme={this.muiTheme}>
              <ComposedComponent {...this.props} />
            </MuiThemeProvider>
          </ApolloProvider>
        </CookiesProvider>
      );
    }
  };