import {
  useState,
  ReactNode,
  useCallback,
  useMemo,
  useEffect,
} from 'react'
import { ThemeProvider } from 'styled-components'
import { client } from 'config/clients'

import {
  CustomTheme,
  defaultTheme,
  facrTheme,
  lffTheme,
  tunisTheme,
} from './config'
import { ClientNames } from '../../config/clients/types'

type Props = {
  children: ReactNode,
}

export const Theme = ({ children }: Props) => {
  const [theme, setTheme] = useState<CustomTheme>(defaultTheme)

  const switchTheme = useCallback(() => {
    switch (client.name) {
      case ClientNames.Lff:
        setTheme(lffTheme)
        break
      case ClientNames.Facr:
        setTheme(facrTheme)
        break
      case ClientNames.Tunisia:
        setTheme(tunisTheme)
        break
      default:
        setTheme(defaultTheme)
        break
    }
  }, [])

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

  const memoTheme = useMemo(() => ({
    ...theme,
    switchTheme,
  }), [theme, switchTheme])

  return (
    <ThemeProvider theme={memoTheme}>
      {children}
    </ThemeProvider>
  )
}
