import React, { useMemo, useContext, createContext, memo } from 'react'

import type { ThemeProviderProps, TokensType } from './interface'
import TOKENS from './tokens-mix'

const ThemeTokensContext = createContext(TOKENS)

export const useThemeTokens = () => useContext(ThemeTokensContext)

const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, theme }) => {
  const state = useMemo<TokensType>(
    () => ({
      ...TOKENS,
      ...theme,
    }),
    [theme],
  )

  return (
    <ThemeTokensContext.Provider value={state}>
      {children}
    </ThemeTokensContext.Provider>
  )
}

export default memo<typeof ThemeProvider>(ThemeProvider)