import React, { useEffect, useState } from 'react'
import { Provider } from 'react-redux'
import { ThemeProvider } from 'styled-components'
import { useStore } from '../client/redux/store'
import { GlobalStyle, Loading } from '../client/styled/common'
import LayoutComponent from '../client/layout'
import { Spin } from 'antd'
import 'antd/dist/antd.css'

const theme = {
  colors: {
    primary: '#0070f3'
  }
}

export default function App({ Component, pageProps }) {
  const store = useStore(pageProps.initialReduxState)
  const [pageLoad, setPageLoad] = useState(false)

  useEffect(() => {
    setTimeout(() => { 
      setPageLoad(true)
    }, 100)
  }, [])

  return (
    <>
      <GlobalStyle whiteColor={true} />
      <ThemeProvider theme={theme}>
        <Provider store={store}>
          {
            pageLoad ?
              <LayoutComponent>
                <Component {...pageProps} />
              </LayoutComponent> :
              <Loading>
                <Spin size="large" />
              </Loading>
          }
        </Provider>
      </ThemeProvider>
    </>
  )
}