import React from 'react'
import { Web3ReactProvider } from '@web3-react/core'
import { HelmetProvider } from 'react-helmet-async'
import { Provider } from 'react-redux'
import { getLibrary } from 'utils/web3React'
import { ConfigProvider, ModalProvider } from '@pancakeswap/uikit'
import { ThemeContextProvider } from 'contexts/ThemeContext'
import { LanguageProvider, useTranslation } from 'contexts/Localization'
import { RefreshContextProvider } from 'contexts/RefreshContext'
import { ToastsProvider } from 'contexts/ToastsContext'
import store from 'state'

const ConfigProviders: React.FC = ({ children }) => {
  const { t } = useTranslation()
  return (
    <ConfigProvider t={t}>
      <ModalProvider>{children}</ModalProvider>
    </ConfigProvider>
  )
}

const Providers: React.FC = ({ children }) => {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Provider store={store}>
        <ToastsProvider>
          <HelmetProvider>
            <ThemeContextProvider>
              <LanguageProvider>
                <RefreshContextProvider>
                  <ConfigProviders>{children}</ConfigProviders>
                </RefreshContextProvider>
              </LanguageProvider>
            </ThemeContextProvider>
          </HelmetProvider>
        </ToastsProvider>
      </Provider>
    </Web3ReactProvider>
  )
}

export default Providers