import React, { FC, ReactNode } from 'react'
import { ThemeProvider } from 'react-jss'

import { ThemeProps, defaultTheme } from '../../themes'
import CommonStyles from './common-styles'
import { customTheme } from './custom-theme'

type Props = {
  children: ReactNode
}

export const AppThemeProvider: FC<Props> = ({ children }) => {
  let theme: Partial<ThemeProps> = defaultTheme

  const localTheme = localStorage.getItem('theme')

  if (localTheme === 'custom') {
    theme = customTheme
  }

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