/* eslint-disable react/jsx-props-no-spreading */
import { Box } from '@chakra-ui/react'
import AOS from 'aos'
import 'aos/dist/aos.css'
import CustomNextNProgress from '../components/Common/CustomNextNProgress'
import ErrorBoundary from '../components/Common/ErrorBoundary'
import { LOADER_CONTAINER } from '../constants/index'
import { getCustomMeta } from '../constants/meta'
// import useSentryUser from '../hooks/sentry/useSentryUser'
import { NextPage } from 'next'
import { DefaultSeo, NextSeo } from 'next-seo'
import type { AppProps } from 'next/app'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { Fragment, useEffect, useState } from 'react'
import { Hydrate, QueryClient, QueryClientProvider } from 'react-query'
import { ReactQueryDevtools } from 'react-query/devtools'
// import 'slick-carousel/slick/slick-theme.css'
// import 'slick-carousel/slick/slick.css'
// import { wrapper } from 'state'
// import 'styles/globals.scss'
// import defaultSEOConfig from '../../next-seo.config'
// import Providers from '../Providers'

export const queryClient = new QueryClient()

// const MyApp = (props: AppProps) => {
//   // const [queryClient] = useState(() => new QueryClient())
//   const { pageProps } = props
//   // const persistor = persistStore(store, {}, function () {
//   //   persistor.persist()
//   // })

//   useEffect(() => {
//     AOS.init({
//       // startEvent: 'load',
//       duration: 2000,
//       offset: 200,
//       // once: true,
//     })
//   }, [])

//   return (
//     <Providers>
//       {/* <PersistGate loading={<div>loading</div>} persistor={persistor}> */}
//       <QueryClientProvider client={queryClient}>
//         <Hydrate state={pageProps.dehydratedState}>
//           <Head>
//             <meta
//               name="viewport"
//               content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover"
//             />
//           </Head>
//           <DefaultSeo {...defaultSEOConfig} />
//           {/* <AnimatePresence onExitComplete={() => window.scrollTo(0, 0)} exitBeforeEnter initial={true}> */}
//           <App {...props} />
//           {/* </AnimatePresence> */}
//           {/* </PersistGate> */}
//         </Hydrate>
//         <ReactQueryDevtools initialIsOpen={false} />
//       </QueryClientProvider>
//     </Providers>
//   )
// }

export type NextPageWithLayout<T> = NextPage<T> & {
  Layout?: React.FC<any>
}

export type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout<any>
}

// const ProductionErrorBoundary = process.env.NODE_ENV === 'production' ? ErrorBoundary : Fragment
// const App = ({ Component, pageProps }: AppPropsWithLayout) => {
//   // Use the layout defined at the page level, if available
//   const { pathname } = useRouter()
//   const pageMeta = getCustomMeta(pathname)

//   const Layout = Component.Layout || Fragment

//   useSentryUser()

//   return (
//     <ProductionErrorBoundary>
//       <CustomNextNProgress />
//       <NextSeo {...pageMeta} />
//       <Box id={LOADER_CONTAINER} />
//       <Layout>
//         <Component {...pageProps} />
//       </Layout>
//     </ProductionErrorBoundary>
//   )
// }

// export default wrapper.withRedux(MyApp)
