// import App from 'next/app'

import React, { useState, useEffect } from 'react'

import Layout from '../components/layout'

import '../defaultStyles.css'
import constants from '../constants.json'

function MyApp({ Component, pageProps, router }) {
  const [userId, setUserId] = useState()
  const [motd, setMotd] = useState()
  const [userSpecificMotd, setUserSpecificMotd] = useState()

  const getGlobalProps = () => {
    fetch(`${constants.apiUrl}infos?motd=true`, {
      credentials: 'include',
      Accept: 'application/json',
      'Content-Type': 'application/json',
    })
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        setUserId(data.uid)
        setMotd(data.motd)
        setUserSpecificMotd(data.userSpecificMotd)
      })
  }

  useEffect(() => {
    getGlobalProps()
  }, [])

  const globalData = {
    userId,
    motd,
    userSpecificMotd,
  }

  return (
    <Layout
      router={router}
      globalData={globalData}
      refetchGlobalData={getGlobalProps}
    >
      <Component
        {...pageProps}
        router={router}
        globalData={globalData}
        refetchGlobalData={getGlobalProps}
      />
    </Layout>
  )
}

export default MyApp