import '@/styles/tailwind.css'

import { ApolloProvider } from '@apollo/client'
import ProgressBar from '@badrap/bar-of-progress'
import { ThemeProvider } from '@retail-ui/core'
import { Provider as NextAuthProvider } from 'next-auth/client'
import Router from 'next/router'
import React from 'react'

import { useApollo } from '@/lib/apolloClient'
import { AppPropsWithLayout } from '@/types/page'

const progress = new ProgressBar({
  size: 2,
  color: '#7e3af2',
  className: 'bar-of-progress',
  delay: 100,
})

Router.events.on('routeChangeStart', progress.start)
Router.events.on('routeChangeComplete', progress.finish)
Router.events.on('routeChangeError', progress.finish)

const App = ({ Component, pageProps }: AppPropsWithLayout) => {
  const { session } = pageProps
  const apolloClient = useApollo(pageProps.initialApolloState, session?.token)
  const getLayout = Component.getLayout || ((page) => page)

  return (
    <>
      <NextAuthProvider session={session}>
        <ApolloProvider client={apolloClient}>
          <ThemeProvider>
            {getLayout(<Component {...pageProps} />)}
          </ThemeProvider>
        </ApolloProvider>
      </NextAuthProvider>
    </>
  )
}

export default App