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

import Header from '~/components/header'
import Footer from '~/components/footer'
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 [cart, setCart] = useState(_cart)

  return (
    <>
      <Header user={user} cart={cart} />
      <main><Component {...{user, cart, setCart, ...pageProps}} /></main>
      <Footer/>
    </>
  )
}

Layout.propTypes = {
  pageProps: PropTypes.object
}

export default Layout