import {
  useState,
  ReactNode,
  useCallback,
  useMemo,
} from 'react'
import { ThemeProvider } from 'styled-components'

import {
  CustomTheme,
  lightTheme,
  darkTheme,
} from './config'

type Props = {
  children: ReactNode,
}

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

  const switchTheme = useCallback(
    () => {
      setTheme(theme.name === 'light' ? darkTheme : lightTheme)
    },
    [theme],
  )

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

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