import React from 'react'
import Router from 'next/router'
import Header from '../components/Header'
import Counter from '../components/Counter'
import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(import('../components/hello1'))
const DynamicComponentWithCustomLoading = dynamic(
  import('../components/hello2'),
  {
    loading: () => (<p>...</p>)
  }
)
const DynamicComponentWithNoSSR = dynamic(
  import('../components/hello3'),
  { ssr: false }
)
const DynamicComponent5 = dynamic(import('../components/hello5'))

const DynamicBundle = dynamic({
  modules: (props) => {
    const components = {
      Hello6: import('../components/hello6')
    }

    if (props.showMore) {
      components.Hello7 = import('../components/hello7')
    }

    return components
  },
  render: (props, { Hello6, Hello7 }) => (
    <div style={{padding: 10, border: '1px solid #888'}}>
      <Hello6 />
      {Hello7 ? <Hello7 /> : null}
    </div>
  )
})

export default class Index extends React.Component {
  static getInitialProps ({ query }) {
    return { showMore: Boolean(query.showMore) }
  }

  toggleShowMore () {
    const { showMore } = this.props
    if (showMore) {
      Router.push('/')
      return
    }

    Router.push('/?showMore=1')
  }

  render () {
    const { showMore } = this.props

    return (
      <div>
        <Header />
        <DynamicComponent />
        <DynamicComponentWithCustomLoading />
        <DynamicComponentWithNoSSR />
        <DynamicBundle showMore={showMore} />
        <button onClick={() => this.toggleShowMore()}>Toggle Show More</button>
        {
          /*
            Since DynamicComponent5 does not render in the client,
            it won't get downloaded.
          */
        }
        { React.noSuchField === true ? <DynamicComponent5 /> : null }

        <p>HOME PAGE is here!</p>
        <Counter />
      </div>
    )
  }
}