import React, {useState} from "react"
import PropTypes from "prop-types"
import axios from 'axios'

import {UserContextProvider} from '../hooks/useUser'
import {CartContextProvider} from '../hooks/useCart'
import Header from '~/components/header'
import Footer from '~/components/footer'
import ErrorBoundary from '~/components/errorBoundary'
import "../styles/layout.css"

Layout.getInitialProps = async ({Component, ctx}) => {
  // Configure axios instance
  ctx.axios = axios.create({
    headers: (ctx.req && ctx.req.headers && ctx.req.headers.cookie)
      ? {cookie: ctx.req.headers.cookie}
      : undefined
  })

  const promises = {
    user: ctx.axios.get(`/api/auth`),
    cart: ctx.axios.get(`/api/cart`)
  }

  const {data: user} = await promises.user
  const {data: cart} = await promises.cart

  let pageProps = {};
  if(Component.getInitialProps)
    pageProps = await Component.getInitialProps({ctx})

  return {pageProps, user, cart}
}

function Layout({ Component, pageProps, user, cart: _cart }){
  const cartState = useState(_cart)

  return (
    <CartContextProvider value={cartState}>
      <UserContextProvider value={user}>
        <Header/>
        <main>
          <ErrorBoundary>
            <Component {...pageProps} />
          </ErrorBoundary>
        </main>
        <Footer/>
      </UserContextProvider>
    </CartContextProvider>
  )
}

Layout.propTypes = {
  pageProps: PropTypes.object
}

export default Layout