import React, { Component } from 'react'
import { Provider } from 'react-contextual'
import PropTypes from 'prop-types'
import 'regenerator-runtime/runtime'
import ErrorBoundary from '@argos/error-boundary'

import { BackDrop, Checkout, Logo } from '../../components'
import { User, Navigation, Search, Suggestions, TopBar } from '../../containers'
import { MegaNavService } from '../../services'
import { NavigationStore, UserStore } from '../../stores'

import styles from './Header.scss'

export default class Header extends Component {
  static propTypes = {
    checkout: PropTypes.bool,
    routes: PropTypes.shape({
      help: PropTypes.func,
      stores: PropTypes.func,
      search: PropTypes.func,
      megabuttons: PropTypes.arrayOf(PropTypes.func)
    }),
    overrideSearchTerm: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
    overrideTrolleyCount: PropTypes.number,
    overrideWishlistCount: PropTypes.oneOfType([PropTypes.number, PropTypes.element]),
    overrideOnSearchSubmit: PropTypes.func,
    onUserInfoLoad: PropTypes.func,

    /* legacy - to depcreate */
    config: PropTypes.string,
    catalogId: PropTypes.number,
    storeId: PropTypes.number,
    langId: PropTypes.number,
    domain: PropTypes.string,
    dynamicMegaButtons: PropTypes.bool,
    loadMegaNavSubcategories: PropTypes.bool,
    openSearchBarByDefault: PropTypes.bool,
    overrideMegaNavLocation: PropTypes.string
  }

  static defaultProps = {
    checkout: false,
    routes: {},
    overrideTrolleyCount: null,
    overrideWishlistCount: null,
    onUserInfoLoad: () => ({}),
    storeId: 10151,
    langId: 110,
    catalogId: 10001
  }

  static async getInitialProps() {
    const taxonomy = await MegaNavService({ lite: true, origin: 'https://www.argos.co.uk' })
    return { taxonomy }
  }

  get store() {
    return { ...global.__INITIAL_HEADER_STATE__, ...this.props }
  }

  render() {
    const {
      checkout,
      overrideTrolleyCount,
      overrideWishlistCount,
      onUserInfoLoad,
      skipToContentTag
    } = this.props

    /* Stripped down header for checkout */
    if (checkout) {
      return (
        <ErrorBoundary>
          <Checkout skipToContentTag={skipToContentTag} />
        </ErrorBoundary>
      )
    }

    return (
      <ErrorBoundary>
        <Provider {...this.store}>
          <Provider store={NavigationStore}>
            <Provider store={UserStore}>
              <header id="haas-v2" className={styles.header}>
                <TopBar />
                <div className={styles.main}>
                  <div className={styles.container}>
                    <Logo />
                    <Navigation />
                    <Suggestions>
                      <Search />
                    </Suggestions>
                    <User
                      onUserInfoLoad={onUserInfoLoad}
                      overrideTrolleyCount={overrideTrolleyCount}
                      overrideWishlistCount={overrideWishlistCount}
                    />
                  </div>
                </div>
              </header>
              <BackDrop />
            </Provider>
          </Provider>
        </Provider>
      </ErrorBoundary>
    )
  }
}