/** @format */

import { CssBaseline, MuiThemeProvider } from "@material-ui/core"
import React, { ReactNode, HTMLAttributes } from "react"
import { createTheme, ColorScheme, Theme } from "./theme"
import { Provider, defaultTheme, Button } from "@adobe/react-spectrum"
import "./sass/main.scss"

export type ThemeProviderProps = {
  /**
   * primary color of theme.
   */
  colorScheme?: ColorScheme
} & HTMLAttributes<HTMLDivElement>

export function ThemeProvider({ colorScheme, children, ...props }: ThemeProviderProps) {
  const theme = createTheme(colorScheme)
  return (
    <div {...props}>
      <Theme.Provider value={{ colorScheme }}>
        <Provider theme={defaultTheme} colorScheme={colorScheme}>
          <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
        </Provider>
      </Theme.Provider>
    </div>
  )
}