import 'isomorphic-fetch'
import React from 'react'
import {
  ApolloClient,
  ApolloProvider,
  getDataFromTree
} from 'react-apollo'
import {createNetworkInterface} from 'apollo-upload-client'

const ssrMode = !process.browser
let apolloClient = null

function initClient (headers, initialState) {
  return new ApolloClient({
    initialState,
    ssrMode,
    networkInterface: createNetworkInterface({
      uri: process.env.API_URI
    })
  })
}

function getClient (headers, initialState = {}) {
  if (ssrMode) return initClient(headers, initialState)
  if (!apolloClient) apolloClient = initClient(headers, initialState)
  return apolloClient
}

export default Component => (
  class extends React.Component {
    static async getInitialProps (ctx) {
      const headers = ctx.req ? ctx.req.headers : {}
      const client = getClient(headers)

      const props = {
        url: {
          query: ctx.query,
          pathname: ctx.pathname
        },
        ...await (Component.getInitialProps ? Component.getInitialProps(ctx) : {})
      }

      if (ssrMode) {
        const app = (
          <ApolloProvider client={client}>
            <Component {...props} />
          </ApolloProvider>
        )
        await getDataFromTree(app)
      }

      return {
        initialState: {
          apollo: {
            data: client.getInitialState().data
          }
        },
        headers,
        ...props
      }
    }

    constructor (props) {
      super(props)
      this.client = getClient(this.props.headers, this.props.initialState)
    }

    render () {
      return (
        <ApolloProvider client={this.client}>
          <Component {...this.props} />
        </ApolloProvider>
      )
    }
  }
)